Solução ao problema de float em construção CSS

Quando uma camada tem um float a camada container sobre a que está situada muitas vezes não acompanha. Solucionamos isso com o atributo CSS overflow:hidden e definindo um width ao container.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 20/6/09
Valorize este artigo:
Se estivermos construindo nossas páginas web com CSS, algo que já deveríamos estar fazendo há tempo, poderemos ter observado um problema que às vezes tem a construção quando utilizamos float para alinhar camadas à esquerda ou a direita. Neste artigo, vamos tratar de explicar o problema, quando se produz e dar uma simples solução.

Esta solução que publicamos no Workshop de CSS de CriarWeb.com está amplamente divulgada e aceitada por diversos desenvolvedores.

O problema do float e o crescimento das camadas container

Imaginemos que temos um container em uma camada DIV que tem suas características, como uma cor de fundo, uma borda ou o que quisermos colocar. Agora imaginemos que nesse container colocamos dentro um par de camadas DIV e que estas estão flutuando à esquerda e à direita, com o atributo float: left e float: right.

Esta configuração de camadas, que é bastante habitual, poderia ser utilizada para por exemplo, criar uma estrutura de duas colunas na página web. Para esclarecer, chamaremos container a camada que inclui as outras camadas com o float, que chamaremos camadas flutuantes.

Nas camadas flutuantes supostamente colocaremos diversos conteúdos, como texto, imagens ou o que desejarmos. Portanto, as camadas flutuantes crescerão para baixo o espaço suficiente para albergar a todos os conteúdos que colocarmos. O ideal é que o container acompanhasse o crescimento das camadas flutuantes, tornando-se tão alto quanto for necessário para hospedar as duas camadas flutuantes. Porém, realmente nem sempre ocorre isto e muitas vezes teremos observado como o container fica com um tamanho mínimo, acima de todo, e não cresce o suficiente para que as camadas flutuantes caibam nele.

Talvez este problema já tenhamos experimentado e então poderemos entendê-lo. Em qualquer caso, o melhor é ver uma imagem para que fique claro o efeito pouco desejável que muitas vezes encontraremos:


Isto é o que ocorreria com um código como este:

<style type="text/css">
#container{
   border: 1px solid #bbb;
   background: #ddd;
   padding: 10px;
}
#flutuanteesquerda{
   float: left;
   background: #fc3;
   width: 200px;
   padding: 10px;
}
#flutuantedireita{
   float: right;
   background: #3cf;
   width: 200px;
   padding: 10px;
}
</style>

<div id="container">
   <div id="flutuanteesquerda">
      Esta camada tem um float, para se alinhar à esquerda. O problema é que o container da mesma não se intere que esta camada cresce muito para baixo e parece como se terminasse em seguida.
   </div>
   <div id="flutuantedireita">
      Aqui também temos float, para se alinhar à direita. Porém, o container onde está colocada não se intere que a camada cresce para baixo.
   </div>
</div>

Solução com overflow:hidden e definindo um width

O que seria desejável é que o container se faça suficientemente grande para albergar todo o conteúdo que se coloca dentro, independentemente de que as camadas que coloquemos dentro tenham o atributo float. Pode-se ver na seguinte imagem:


Isto na verdade se consegue com uma combinação de dois atributos que devemos colocar nos estilos CSS da camada container.

Simplesmente temos que atribuir o valor hidden ao atributo CSS chamado overflow. Isto funciona corretamente em navegadores como Firefox, Opera ou Chrome (em geral em todos os navegadores menos Explorer, pelo menos em versões atuais).

Para conseguir que Explorer também expanda o container até a medida suficiente como para albergar o conteúdo flutuante, temos que colocar um atributo width, com um valor qualquer.

Por exemplo, o container se veria corretamente com este código CSS:

#container{
   overflow: hidden;
   width: 450px;
   border: 1px solid #bbb;
   background: #ddd;
   padding: 10px;
}

O atributo width pode ter qualquer valor, por isso não temos por que atribuir um valor fixo. Por exemplo, também funcionaria com um width: 100%;

Para acabar, deixo o link a um exemplo onde se pode ver o problema de construção CSS com float e a solução combinando o overflow: hidden e o width. Ver o exemplo em uma página à parte.





Comentários do artigo
Foram enviados 12 comentários ao artigo
10 comentários não revisados
2 comentários revisados:
Atualidade
Por: subfa
12/3/10
Esse exemplo não está incorreto, mas podemos faze-lo de outra forma mais atual.

Ainda dentro da div que abriga todo o site, logo abaixo das divs flutuando uma para a direita e outra para a esquerda, nós utilizamos a propriedade clear: both (<div style="clear: both;"></div>), isso causará o mesmo efeito, mas é mais semântico.
Sensacional
Por: juliantoledo
26/3/10
Já utilizei diversas táticas para corrigir esse erro.
display: table;
clear: both;
<div></div>

e agora o
overflow: hidden;

Achei ótima a solução com overflow, e tem lógica pois trata-se do controle de barra de rolagem (conteúdo) da div.

Obrigado.

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato