Galera montei um um container
e um sistema de abas utilizando css, porém estou com problemas para colocar as abas dentro do container
.
Meu problema é que o container
não acompanha o tamanho das abas, alguém sabe o que esta errado?
Segue o código:
.container {
border-radius: 4px;
background:#d7d7d7;
margin: 0 auto 10px;
width: 900px;
}
.container-head {
display: table;
width: 100%;
color: #fff;
background:#000;
border-radius: 4px 4px 0 0;
height: 65px;
}
.container-head span {
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container-body {
padding: 20px;
background:#d7d7d7;
}
.container-body_grafico {
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
}
.hidden-page {
width: 100%;
height: 100%;
position:fixed;
z-index: 999;
background: #FFFFFF;
padding-top: 30px;
}
.container-footer {
border-top: 1px solid #D7D7D7;
height: 45px;
padding-left: 10px;
padding-right: 10px;
}
.container-footer button {
float: right;
}
.container-footer .txt {
float: left;
margin-top: 12px;
}
/* Container das ABAS */
.tabs-container {
position: relative;
top: 3px;
}
/* ABAS */
input.tabs {
display: none;
}
input.tabs + label + div {
width: 100%;
opacity: 0;
position: absolute;
border: 1px solid #0091FF;
top: 40px;
background-color: #FFFFFF;
}
input.tabs + label + div {
z-index: -1;
}
input.tabs:checked + label + div {
opacity: 1;
z-index: 1;
}
.tabs_conteudo {
margin: 20px;
}
/* Labels */
input.tabs + label {
line-height: 40px;
padding: 0 20px;
float: left;
color: #484848;
cursor: pointer;
margin-right: 1px;
}
input.tabs + label:hover {
border-radius: 4px 4px 0px 0px;
background: #FBBC05;
color: #FFFFFF;
}
input.tabs + label:active {
background: #FFAB00;
}
input.tabs:checked + label {
border-radius: 4px 4px 0px 0px;
background: #0091FF;
color: #FFFFFF;
}
<!-- Container -->
<div class="container">
<div class="container-head">
<span>NOVO CADASTRO</span>
</div>
<div class="container-body">
<!-- Abas -->
<div class="tabs-container">
<!-- ABA 1 -->
<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">DADOS CADASTRO</label>
<div>
<div class='tabs_conteudo'>
asdasdasdasdasd
</div>
</div>
<!-- ABA 2 -->
<input type="radio" name="tabs" class="tabs" id="tab2">
<label for="tab2">DADOS CADASTRO</label>
<div>
<div class='tabs_conteudo'>
asdasdasdasdasd<br><br>dfasdfsadfasdf
</div>
</div>
</div>
</div>
</div>