alignment between div

Question

alignment between div

Navigation

#1 by (-1 votes)

0

Galera I mounted a container and a system of tabs using css , but I'm having trouble putting the tabs inside container .

My problem is that container does not match the size of the tabs, does anyone know what's wrong? Here is 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

asked by anonymous 05.08.2016 / 20:09

1 answer

Recover data after submit PHP - Cookies, how to detect if it is created

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