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:

Overflow Bug no Firefox

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:

Overflow Bug no Firefox

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:

aqui ficará o conteúdo da esquerda
aqui ficará o conteúdo da direita

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.

14 Replies to “A propriedade que faltava”

  1. Muito boa sua saída para este problema. Mas o ideal seria não precisar de nada, vacilo do Firefox, afinal, ninguém é perfeito. Enquanto o Firefox dá uma dorzinha de cabeça, o IE dá uma grande enxaqueca…

  2. Nisso eu não tinha pensado. Realmente cria um trabalho a mais. A dica do Isaac de usar display: table também é muito boa. Agora você tem duas opções. Abraço…

  3. Grande solução.
    Pra resolver esta parada aí já passei por 3 (que coincidentemente foram citadas aqui nos comments hehe):

    1) display: table – não use, dá bugs às vezes.
    2) elemento fantasma com clear both – não legal pois tem que mexer no HTML por conta de um efeito visual. Visual tem que ser só no CSS.
    3) Esta solução que o chess postou para fazer o elemento fantasma via CSS e não via HTML –

    Agora esta aqui acho que vai ser boa.

  4. Aê Micox, o Opera aceita esta propriedade sim, se apareceu a barra de rolagem, tente ajustar a largura, altura e padding, aplique uma borda só para ver se ela está ultrapassando, ao usar o Overflow: auto você tem que tomar cuidado com as dimensões… abraço…

  5. Eu, pelo menos, nunca tive problema com display:table, depende da combinação de regras css que fez, alguns preferem umas, outros optam por outras que no final resultam na mesma, mas na hora de dar pau fazem a diferença. CSS tem muito mistério :S

  6. Valeu pela dica! Acabou de me livrar de uma dor de cabeça pq eu não queria mais usar o elemento fantasma e estava me batendo pra descobrir uma forma melhor de resolver o problema… funcionou bem pra mim no IE e Firefox… ainda não testei nos demais.

    O display: table não funcionou muito legal mas não experimentei adaptar as demais propriedades e ver o efeito delas c/ esta propriedade…

    Mais uma vez, obrigado à todos pelas dicas.
    Abraços.

  7. Que isso cara, estamos às ordens, este problema realmente atrapalha muito no desenvolvimento, é uma situação inesperada. Você planeja na teoria e na prática não dá certo. O CSS é cheio destes “truques” e infelizmente parece que vai ser assim por muito tempo ainda… um grande abraço…

  8. Parabens pela iniciativa!
    Me ajudou bastante com esse post, muito obrigado mesmo!
    Ficarei no aguardo de novos posts, pq sempre é bom uma informação útil como essa!
    Abraço

Deixe um comentário

O seu endereço de e-mail não será publicado.