Why are the Ivs doubling?

Asked

Viewed 67 times

1

I have a one-page code that’s happening something I don’t know about: I have two 100% wide containers, and each has other containers inside.

However, after adding a new container with 100% width, and placing new Ivs inside, it occurs that, inside the first containers, the last div, which is last, folds, ie, goes down in a new line.

But the calculations are right, only bend after adding a new div inside the new container. I’ll send the code down here, and someone please help me?

body{background-color: #DDDDDD}
#geral{
  width: 100%;
  height: 100%;
}
.box{
  float: left;
}

#container1{
  width: 100%;
  height: 80px;
}
#container2{
  width: 100%;
  height: 170px;
  margin-top: 8px;
}
#container3{
  width: 100%;
  height: 200px;
  margin-top: 8px;
}

/*PRIMEIRA LINHA*/
#segundalinha{
  position: relative;
  margin-left: 8px;
  width: 215px; height: 80px;
  background-color: #4e5154;
  border-radius: 5px;
}
/*FIM PRIMEIRA LINHA*/
/*SEGUNDA LINHA*/
#ativos{
  margin-left: 8px;
  width: 180px; height: 170px;
  background-color: #DE962F;
  border-radius: 5px;
}
#status{
  margin-left: 8px;
  width: 244px; height: 170px;
  background-color: #1461c4;
  border-radius: 5px;
}
#instalados{
  margin-left: 8px;
  width: 223px; height: 170px;
  background-color: #DE962F;
  border-radius: 5px;
}
#recebimentos{
  margin-left: 8px;
  width: 660px; height: 170px;
  background-color: #5cb85c;
  border-radius: 5px;
}

/*FIM SEGUNDA LINHA*/
/*TERCEIRA LINHA*/
#graficos{
  width: 438px;
  height: 200px;
  background-color: #FFF;
  margin-left: 8px;
  border-radius: 5px;
}
/*FIM TERCEIRA LINHA*/
<div id="geral">
  <!- PRIMEIRA LINHA ->
  <div id="container1">
    <div id="segundalinha" class="box">
      <!--<img src="icones/pedidos.png" style="width:45px; height:45px; position:absolute; top:5px; left:5px;">
<h6 style="position:absolute; margin:0px; top:6px; left:75px; line-height:100%; font-weight:normal; font-family:arial; color:#FFF">NOVOS PEDIDOS INTERNET</h6>-->
      <div style=" position:absolute; width: 205px; height: 78px; top:1px; left:5px;">
        <table style="position absolute; font-size:12px; font-family:arial; width:205px; height:78px; text-align:left; line-height:10px; color:#FFF">
          <tr>
            <td></td>
            <td colspan="3" style="text-align:left; font-size:12px;">NOVOS PEDIDOS</td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center; width:42px;">Dia</td>
            <td style="text-align:center; width:42px;">Mês</td>
            <td style="text-align:center; width:42px;">Ano</td>
          </tr>
          <tr>
            <td style="width:65px;">Aprovados</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px;">Reprovados</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px; font-weight:bold;">Pendentes</td>
            <td style="font-weight:bold;font-size:16px;">90000</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <!--<h5 style="position:absolute; top:43px; left:5px; font-weight:normal; font-family:arial; color:#FFF">Pendentes: 55</h5>-->
    </div>
    <div id="segundalinha" class="box">
      <!--<img src="icones/pedidos.png" style="width:45px; height:45px; position:absolute; top:5px; left:5px;">
<h6 style="position:absolute; margin:0px; top:6px; left:75px; line-height:100%; font-weight:normal; font-family:arial; color:#FFF">NOVOS PEDIDOS INTERNET</h6>-->
      <div style=" position:absolute; width: 205px; height: 78px; top:1px; left:5px;">
        <table style="position absolute; font-size:12px; font-family:arial; width:205px; height:78px; text-align:left; line-height:10px; color:#FFF">
          <tr>
            <td></td>
            <td colspan="3" style="text-align:left; font-size:12px;">REATIVAÇOES</td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center; width:42px;">Dia</td>
            <td style="text-align:center; width:42px;">Mês</td>
            <td style="text-align:center; width:42px;">Ano</td>
          </tr>
          <tr>
            <td style="width:65px;">Instalações</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px;">Manutenções</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px; font-weight:bold;">Pendentes</td>
            <td style="font-weight:bold;font-size:16px;">90000</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <!--<h5 style="position:absolute; top:43px; left:5px; font-weight:normal; font-family:arial; color:#FFF">Pendentes: 55</h5>-->
    </div>
    <div id="segundalinha" class="box">
      <!--<img src="icones/pedidos.png" style="width:45px; height:45px; position:absolute; top:5px; left:5px;">
<h6 style="position:absolute; margin:0px; top:6px; left:75px; line-height:100%; font-weight:normal; font-family:arial; color:#FFF">NOVOS PEDIDOS INTERNET</h6>-->
      <div style=" position:absolute; width: 205px; height: 78px; top:1px; left:5px;">
        <table style="position absolute; font-size:12px; font-family:arial; width:205px; height:78px; text-align:left; line-height:10px; color:#FFF">
          <tr>
            <td></td>
            <td colspan="3" style="text-align:left; font-size:12px;">INSTALAÇÕES</td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center; width:42px;">Dia</td>
            <td style="text-align:center; width:42px;">Mês</td>
            <td style="text-align:center; width:42px;">Ano</td>
          </tr>
          <tr>
            <td style="width:65px;">Instaladas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px;">Canceladas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px; font-weight:bold;">Pendentes</td>
            <td style="font-weight:bold;font-size:16px;">90000</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <!--<h5 style="position:absolute; top:43px; left:5px; font-weight:normal; font-family:arial; color:#FFF">Pendentes: 55</h5>-->
    </div>
    <div id="segundalinha" class="box">
      <!--<img src="icones/pedidos.png" style="width:45px; height:45px; position:absolute; top:5px; left:5px;">
<h6 style="position:absolute; margin:0px; top:6px; left:75px; line-height:100%; font-weight:normal; font-family:arial; color:#FFF">NOVOS PEDIDOS INTERNET</h6>-->
      <div style=" position:absolute; width: 205px; height: 78px; top:1px; left:5px;">
        <table style="position absolute; font-size:12px; font-family:arial; width:205px; height:78px; text-align:left; line-height:10px; color:#FFF">
          <tr>
            <td></td>
            <td colspan="3" style="text-align:left; font-size:12px;">ATEND. EXTERNO</td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center; width:42px;">Dia</td>
            <td style="text-align:center; width:42px;">Mês</td>
            <td style="text-align:center; width:42px;">Ano</td>
          </tr>
          <tr>
            <td style="width:65px;">Abertas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px;">Finalizadas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px; font-weight:bold;">Pendentes</td>
            <td style="font-weight:bold;font-size:16px;">90000</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <!--<h5 style="position:absolute; top:43px; left:5px; font-weight:normal; font-family:arial; color:#FFF">Pendentes: 55</h5>-->
    </div>
    <div id="segundalinha" class="box">
      <!--<img src="icones/pedidos.png" style="width:45px; height:45px; position:absolute; top:5px; left:5px;">
<h6 style="position:absolute; margin:0px; top:6px; left:75px; line-height:100%; font-weight:normal; font-family:arial; color:#FFF">NOVOS PEDIDOS INTERNET</h6>-->
      <div style=" position:absolute; width: 205px; height: 78px; top:1px; left:5px;">
        <table style="position absolute; font-size:12px; font-family:arial; width:205px; height:78px; text-align:left; line-height:10px; color:#FFF">
          <tr>
            <td></td>
            <td colspan="3" style="text-align:left; font-size:12px;">MANUTENÇÕES</td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center; width:42px;">Dia</td>
            <td style="text-align:center; width:42px;">Mês</td>
            <td style="text-align:center; width:42px;">Ano</td>
          </tr>
          <tr>
            <td style="width:65px;">Abertas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px;">Finalizadas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px; font-weight:bold;">Pendentes</td>
            <td style="font-weight:bold;font-size:16px;">90000</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <!--<h5 style="position:absolute; top:43px; left:5px; font-weight:normal; font-family:arial; color:#FFF">Pendentes: 55</h5>-->
    </div>
    <div id="segundalinha" class="box">
      <!--<img src="icones/pedidos.png" style="width:45px; height:45px; position:absolute; top:5px; left:5px;">
<h6 style="position:absolute; margin:0px; top:6px; left:75px; line-height:100%; font-weight:normal; font-family:arial; color:#FFF">NOVOS PEDIDOS INTERNET</h6>-->
      <div style=" position:absolute; width: 205px; height: 78px; top:1px; left:5px;">
        <table style="position absolute; font-size:12px; font-family:arial; width:205px; height:78px; text-align:left; line-height:10px; color:#FFF">
          <tr>
            <td></td>
            <td colspan="3" style="text-align:left; font-size:12px;">RETIRADAS</td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center; width:42px;">Dia</td>
            <td style="text-align:center; width:42px;">Mês</td>
            <td style="text-align:center; width:42px;">Ano</td>
          </tr>
          <tr>
            <td style="width:65px;">Abertas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px;">Finalizadas</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
            <td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td style="width:65px; font-weight:bold;">Pendentes</td>
            <td style="font-weight:bold;font-size:16px;">90000</td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <!--<h5 style="position:absolute; top:43px; left:5px; font-weight:normal; font-family:arial; color:#FFF">Pendentes: 55</h5>-->
    </div>
  </div>
  <!- FIM PRIMEIRA LINHA ->
  <!- SEGUNDA LINHA ->
  <div id="container2">
    <div id="ativos" class="box">
      <!--<img src="icones/ativos.png" style="width:55px; height:55px; position:absolute; top:15px; left:11px;">-->
      <H5 style="margin:12 0 0 53; font-family:arial; line-height:100%; font-weight:normal; font-family:arial; ">CLIENTES ATIVOS</H5>
      <!--<h2 style="position:absolute; margin: 0px; top: 40px; left: 74px; color: #FFF;">10.376</h2>

<hr width="158px" style="position:absolute; top:85px; left:11px; border:1px solid #428bca">-->
      <div style="margin: 0 auto; margin-top:14px; width:160px; height:105px";>
        <table border="1px" style="width:160px; height:120px; font-family:arial; font-size:12px;">
          <tr>
            <td>PAGANTES</td>	<td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td>INTERNOS</td>	<td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td>GRATUITOS</td>	<td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td>PARCEIROS</td>	<td style="text-align:right;">90000</td>
          </tr>
          <tr>
            <td>TOTAL</td>	<td style="text-align:right;">90000</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="status" class="box">
      <H5 style="margin: 8 0 0 80;font-family:arial; font-weight:normal; color:#FFF">STATUS DOS CLIENTES</H5>
      <div style="margin: 0 auto; margin-top: 14px; width:222px; height:138px;">
        <table border="1" style="font-size:12px; font-family:arial; width:222px; height:114px; color:#FFF; border-color:#FFF;">
          <tr>
            <td>Tipo</td> <td style="text-align: right;">Qtd</td>
          </tr>
          <tr>
            <td>2 - Pendência Financeira</td> <td style="text-align: right;">90000</td>
          </tr>
          <tr>
            <td>4 - Aviso de Bloqueio</td> <td style="text-align: right;">90000</td>
          </tr>
          <tr>
            <td>5 - Bloqueado 1ª Mensalidade</td> <td style="text-align: right;">90000</td>
          </tr>
          <tr>
            <td>6 - Bloq. Aut. Falta Pagamento</td> <td style="text-align: right;">90000</td>
          </tr>
          <tr>
            <td>9 - Bloq. Man. Falta Pagamento</td> <td style="text-align: right;">90000</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="instalados" class="box">
      <img src="icones/ion.png" style="width:45px; height:45px; margin:10 0 0 10; position: absolute;">
      <!--<h5 style="position:absolute; margin:0px; top:15px; left:74px; font-family:arial; line-height:100%;">CLIENTES INSTALADOS</h5>-->
      <div style=" width:138px; height:165px; margin:auto; margin-left:60px; margin-top:5px;">
        <table style="font-size:12px; font-family:arial; width:145px; height:140px;">
          <tr>
            <td colspan="3">CLIENTES INSTALADOS</td>
          </tr>
          <tr>
            <td>DIA</td> <td>MÊS</td> <td>ANO</td>
          </tr>
          <tr>
            <td>90000</td> <td>90000</td> <td>90000</td>
          </tr>
          <tr>
            <td colspan="3">STBS INSTALADOS</td>
          </tr>
          <tr>
            <td>DIA</td> <td>MÊS</td> <td>ANO</td>
          </tr>
          <tr>
            <td>90000</td> <td>90000</td> <td>90000</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="recebimentos" class="box">
      <img src="icones/local.png" style="width:55px; height:55px">
      <h5>RECEBIMENTOS LOCAL MÊS</h5>
    </div>
  </div>
  <!- FIM SEGUNDA LINHA ->

  <!- TERCEIRA LINHA ->
  <div id="container3">
    <div id="graficos" class="box"></div>
    <div id="graficos" class="box"></div>
    <div id="graficos" class="box"></div>
  </div>
  <!- FIM TERCEIRA LINHA->

</div>

html css div
  • 1

    I don’t understand the problem, you want the Divs to follow one another’s height?

  • The problem was that the page width was smaller than the Divs width, so obviously the last one as there is no space goes down. All I had to do was to increase the size of the general tax bill!

1 answer

-2

discovered the proeblema, the body was smaller than the width of the containers and Divs, Astei add a fixed size larger than them that got everything right!

Browser other questions tagged html css div

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