I have a one page code that is happening something I do not know: I have two divs containers with 100% width, and each one has other divs inside.
However, after adding a new container with 100% width, and putting new divs in, it happens that, inside the first containers, the last div, which is last, doubles, that is, it goes down in a new line .
But the calculations are right, only fold after adding a new div inside the new container. I'll send the code down here, and can 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>