CriarWeb.com > Manuais > Workshop de CSS

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.