alignment between div

Asked

Viewed 28 times

0

Guys I rode a container and a flap system using css, but I’m having trouble putting the flaps inside the container.

My problem is that the container does not follow the size of the tabs, someone knows what is wrong?
Follows the code: 

.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>

html css

  • What was the expected result Hugo ?

  • the container has gray background, and I put the tabs inside it. Note that the count does not follow the size of the tabs

  • You want the gray background to appear ?

1 answer

-1

You can solve your problem like this:

.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;*/ /*COMENTEI ESSA LINHA*/
  background: #d7d7d7;
  width: 100%; /*ADICIONEI ESSA LINHA*/
}
.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>

  • didn’t work out, what I want and that div container-body track the size of tabs-container. Looks like the div tabs-container floating on top of the div container-body

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.