Problemas com floats - Desobstruindo floats

Vamos ver aqui como resolver o seguinte problema: floats obstruidos.

O que é isso?

Quando temos um ou mais elementos flutuantes dentro de um container alguns navegadores não conseguem distinguir mais a altura dos elementos flutuantes fazendo com que o container se contrai-a.

Veja o exemplo na figura abaixo:

A div1 é container da div2 e div3 que estão flutuando, note que a div1 se contraiu ficando menor que a div2 ou div3.

O código que resultaria isso seria algo assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

Para resolver esse problema podemos criar uma div abaixo da ultima div que flutua e colocar nela o estilo clear:both, ficando assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div class="clear"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

.clear{
clear:both;
}

Na visualização:

E pronto, problema resolvido.

É muito comum iniciantes em layouts com css terem esse problema que geralmete pode ser resolvido sem marcação extra adicionando o clear:both no rodape da página.

Posts relacionados

• 15/12/2008 -- Bug da margem duplica no Internet Explorer 6
• 28/02/2009 -- Centralizando Layout com CSS
• 28/02/2009 -- Recomendação de Livros para Web Design
• 14/12/2008 -- CSS para Inspiração
• 26/02/2009 -- Solução para o Flicker Bug

(5 votes, average: 5,00 out of 5)

 Loading ...