Nagüeva

Um problema comum ao utilizar elementos com a propriedade float é que o elemento pai não tem sua altura afetada pelo elemento com float.

Uma das soluções era utilizar outro elemento com a propriedade clear:both após o elemento com float.

Entretanto, para isso você tinha que incluir um código muitas vezes desnecessário no HTML.

Procurando melhorar a estrutura do código HTML, encontrei este link no Position Is Everything com uma solução para o problema. Ele utiliza o pseudo-elemento :after e hacks para os browsers que não o interpretam.

Posteriormente, encontrei outra solução que não faz uso de pseudo-elementos. Basta setar duas propriedades para o CSS do elemento pai.

div.container {
overflow: auto;
width: 100%
}


Confira o exemplo.

Algumas considerações:

• A propriedade width apenas é necessária devido ao conceito hasLayout do Internet Explorer;
• Pode ser que em alguns casos você tenha que definir o width com valor diferente de 100%, isso vai depender do seu layout;
• Devido à propriedade overflow, em alguns casos podem aparecer barras de rolagem, você pode resolver isso aplicando valores apropriados para a propriedade width e, muito raramente, height;
• Parece que alguns browsers da Apple aplicam barras de rolagem para o overflow:auto, nesse caso utilize overflow:hidden.