Acho que todo mundo já passou por isso: você está fazendo um css rapidinho, um elemento tem uma imagem de fundo e alguns elementos como filho. Você dá um refresh pra ver como está ficando e a imagem de fundo simplesmente não “estica” o suficiente.
Se você tem um elemento html e os últimos filhos dele estão flutuando, isto é, tem no css um “float: left;” ou “float: right;”, a altura do elemento pai será calculada até o fim dos últimos elementos sem flutuação. Pra resolver existem algumas maneiras:
- Overflow: se você colocar um “overflow: hidden;” no elemento pai resolve, mas você terá problemas se (1) o elemento tiver altura ou largura – ele vai cortar tudo o que ultrapassar a altura e/ou largura determinada – ou (2) se você precisar que algum elemento filho “vaze”, por exemplo, tenha um margin-top negativo. Essa é a minha favorita.
- Display: table: não é a mais legal, mas funciona. Em algumas versões antigas do Firefox dava problema, mas resolveram.
- Adicionar um elemento no final do elemento pai: faz seu html ter um lixo não semântico sem significado lá, uma div vazia, por exemplo, mas vai quebrar o galho caso nada mais funcione.
Passo aqui pra postar coisinhas rápidas, mas são as coisas que vejo dando dor de cabeça pra galera.
UPDATE: nos comentários o Moacir comentou sobre o clearFix, que me pareceu uma solução bem interessante. Há muito tempo dava problema, mas foram modificando até dar certo em todos os navegadores. Valeu Moacir!
Já tentou usar clearFix?