Webpoint

Para quem trabalha com Float, as vezes há a necessidade de colocar o layout em uma DIV que podemos chamar de container. Ela é responsável por controlar mais duas divs que funcionam como uma coluna no Layout onde tudo se encaixa em uma estrutura simples e objetiva, como o Holy Grail (nome dado ao layout típico de um cabeçalho, três colunas).

O problema surge quando esse container não abriga as DIVs internas no Firefox quando se usa float, deixando layout como na figura abaixo:

Nesta visualização, há um container amarelado(que não aparece), uma div cinza flutuando à esquerda, uma div azul claro flutuando à direita.

O código CSS está logo abaixo:

 
#container {
 
  width: 300px;
  height: auto;
  margin: auto;
  border: 1px solid black;
  background-color: #FFFFCC;
 
}
 
#esquerda {
 
  width: 100px;
  float: left;
  background-color: #CCCCCC;
  border: 1px solid red;
 
}
 
#direita {
 
  width: 196px;
  float: right;
  background-color: #CCCCFF;
  border: 1px solid gray;
 
}

Como a altura do container está escolhida para auto, ela deveria se comportar fechando em uma só box as caixas internas, mas ela fica quase inperceptível, se não fosse a borda de 1px que faz aparecer, mostrando-a como o Firefox interpreta de maneira errada, se você olhar no IE, verá algo do tipo:

Desta vez não foi o IE que não se comportou da maneira esperada. Bem, se isto pode ser considerado um Bug, há contradições, pois muitos odeiam admitir que o Firefox falharia, mas o comportamento esperado seria este, pois a div container está com o código abaixo:

 
<div id="container">
<div id="esquerda">aqui ficará o conteúdo da esquerda</div>
<div id="direita">aqui ficará o conteúdo da direita</div>
</div>
 

Assim, se a div tivesse sido fechada logo após sua abertura, estaria certa a visualização do firefox.

Se a altura do Box "mestre" não for auto, ele irá se expandir até aquela altura, ou seja, você teria que colocar a altura do tamanho da maior página, o que seria uma solução problema, por que você teria que mudar toda vez este valor quando mais conteúdo é esperado.

E a solução?

Um simples propriedade deixa a visualização esperada no Firefox e não alterna nada no IE 6 e 7.

Apenas adicione a div que servirá como container overflow: auto e este box irá se expadir até o fim da div com maior altura se não for dada nenhuma margem.

Assim, o código do CSS do container ficará assim:

 
#container {	width: 300px;
 
 height: auto;
 
 margin: auto;
 
 border: 1px solid black;
 
 background-color: #FFFFCC;
 
 overflow: auto;
 
}

Sobre o overflow: auto

Esta propriedade que resolveu uma grande dor de cabeça tem a seguinte especificação na W3C:

Geralmente, o conteúdo de um box é geralmente confinado nos limites de conteúdo deste box. Em certos casos, este box pode "transbordar", significando que seu conteúdo fique parte ou completamente fora do box

Portanto, esta propriedade garante que o conteúdo irá contornar os boxs internos até seu final, não deixando nenhuma parte "sobrando".

Esta propriedade já deveria ser padrão no firefox, mas precisa ser especificada para funcionar como esperado. Ou seja, ela é precisa ficar explícita.

Esse é um grande problema, pois na maioria dos layouts este tipo de configuração precisa ser empregada.

No entanto, se não for bem calculada e planejada as dimensões, por esta propriedade estar explícita, ao ultrapassar os limites, o box que possui estar propriedade apresenta sua própria barra de rolagem para permitir que se chegue aos seus contornos. Portanto, cuidado na hora de usá-la. Sempre certifique-se que as dimensões estão corretas.

Espero mais uma vez ter sido útil e comentem, me diga se acham isto um bug, se já teve problemas com esta propriedade. Sintam-se a vontade para falar, afinal, estamos aqui para falar das soluções de problemas que nos pegam de surpresa na hora que caímos nos standards.