Home | Posicionamento de div e imagem com float | Exp: divs com float; left e código html e css

<< Voltar

Exemplo divs com float; left e código html e css

Esse código resulta aquelas DIVs abaixo, o height nas DIVs é quase desnecessário e poderia dar problema se for menor que a quantia de conteúdo, mas nesse caso elas não tem conteúdo suficiente para dar uma altura a elas, então usei height:

<div style="border: 2px solid blue; margin: 3px; padding: 2px; width: 365px;">
DIV 1
   <br/>

<div style="border: 1px solid RED; margin: 2px; height: 100px; width: 100px; float: left;">
 2
</div>
<div style="border: 1px solid RED; margin: 2px; height: 125px; width: 100px; float: left;">
 3
</div>
<div style="border: 1px solid RED; margin: 2px; height: 100px; width: 100px; float: left;">
 4
</div>
<div style="border: 1px solid RED; margin: 2px; clear: both;">
 5 Apenas clear: both;
</div>
<div style="border: 1px solid RED; margin: 2px; width: 100px; float: left;">
 6<br/>
 BBB<br/>
 bb<br/>
 <strong>b</strong><br/>
 bb<br/>
 BBB
</div>
<div style="border: 1px solid RED; margin: 2px; height: 100px; width: 100px; float: left;">
 7
</div>
<div style="border: 1px solid RED; margin: 2px; width: 340px; clear:both;">
 8 <br/>Se for usar float  em algumas DIVs, é bom usar clear:both;
</div>
<div style="border: 3px solid red;clear: both;"></div>
</div>
DIV 1
2
3
4
5 Apenas clear: both;
6
BBB
bb
b
bb
BBB
7
8
Se for usar float em algumas DIVs, é bom associar clear:both;

Na DIV 1, foi preciso usar <br/> por causa do Internet Explorer.

Na DIV 8, para ela ficar abaixo das outras seria preciso usar o clear:boht; em uma nova DIV como a 5 ou nela própria.

Mas ainda criei mais uma div vazia, apenas com borda vermelha no final(o travessão vermelho), só para exemplo, essa poderia ser vazia, sem borda, apenas como uma finalização, objeto para "segurar" a DIV 1 até o final.

DIV 6 tem conteúdo, e esse que regula a sua altura.

Muitas coisas podem mudar em relação a versão do Html escolhido para a página, mas isso é um quebra-cabeça, o jeito é fazer testes em navegadores mais usados, e esse exemplo deve ser útil pra quem tem pouca prática com Css