O float é uma propriedade que pode se comportar variavelmente no CSS. Neste artigo pretendo abordar como a propriedade float pode ser aplicado e qual os métodos de correções de algumas variabilidades.
Float é um propriedade que alinha div's subseqüente uma ao lado da outra conforme exemplo abaixo:
Neste Caso o CSS usado seria:
.div1 { float : left; width: 50px;}
.div2 { float : left; width: 80px;}
.div3 { float : left; width: 30px;}
.div4 { float : left; width: 30px;}
Até tranquilo, porem geralmente precisamos colocar estas 4 div’s dentro de uma DIV principal e é ai que geralmente ocorre as variabilidades nos navegadores um exemplo dos problemas que podem acontecer seria:
Veja que a margem da divTudo não acompanha a altura outras div’s, onde geralmente pode destorcer o layout do site. Uma solução para este problema seria:
<!-- CSS -->
<style rel="stylesheet">
.tudo { display: table; }
.div1 { float : left; width: 50px;}
.div2 { float : left; width: 80px;}
.div3 { float : left; width: 30px;}
.div4 { float : left; width: 30px;}
</style>
<!-- HTML -->
<div>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
Para a correção do problema proposto foi utilizado à propriedade
display: table o mesmo faz com que as div’s internas force o dimensionamento da divTudo.
Bom pessoal, por enquanto é isso, a W3TI agradece a preferência até a próxima.
Categoria: CSS
Neste Caso o CSS usado seria:
Veja que a margem da divTudo não acompanha a altura outras div’s, onde geralmente pode destorcer o layout do site. Uma solução para este problema seria:
Para a correção do problema proposto foi utilizado à propriedade display: table o mesmo faz com que as div’s internas force o dimensionamento da divTudo.
Bom pessoal, por enquanto é isso, a W3TI agradece a preferência até a próxima.
