Expanding div

Har man flere float elementer inde i en container div vil containerens størrelse ikke altid følge indholdet. Man kan komme ud for at indholdet fylder mere (er højere) end selve containeren.
Ofte kan man sætte overflow: hidden på containeren for at få den til at udvide sig i takt med indholdet.
Denne metode har dog problmer hvis der netop er elementer der skal gå ud over cointeneren.

Der findes mange mere eller elegante løsninger til denne problematik. En af de bedere er nedenstående:

<div class="container">
/* Elementer der har float */
</div>

<style>
.container:before, .container:after { content: ""; display: block; height: 0; visibility: hidden; }
.container:after { clear: both; } .region { zoom: 1; }
</style>