Onlangs kreeg ik van Stephen Hay te horen dat de methode die ik gebruik voor het clearen van floating containers toch wel redelijk old school was. Ik was dan ook erg blij met de nieuwe manier die hij hierbij aangaf.
Je kent het waarschijnlijk wel. Je bent bezig met het slicen van een website je merkt dat een bovenliggende container niet mee groeit met de lengte van je een floating div. Omdat de hoogte vaak dynamisch is, wil je dit ook niet in je CSS zetten. Hieronder volgen twee manieren om dit voor elkaar te krijgen.
Voorbeeld oude methode
In de methode die ik een aantal jaren geleden op internet vond, voegde je een extra div toe met class=”clear”. De code in deze gevallen zag er dan als volgt uit.
<style>
#container {
width: 400px;
overflow: hidden;
}
#left {
width: 100px;
float: left;
}
#main {
width: 300px;
float: left;
}
.clear {
clear: both;
}
</style>
<div id="container">
<div id="left">Left container</div>
<div id="main">Main container</div>
<div class="clear"></div>
</div>De nieuwe methode
In de nieuwe methode heb je geen extra div meer nodig om hetzelfde effect te krijgen. De truc zit hem in het gebruik van overflow:hidden in je container. Daarbij is het nodig dat je voor IE in ieder geval een breedte of hoogte opgeeft. De code ziet er in dat geval als volgt uit.
<style>
#container {
background: #ccc;
width: 400px;
overflow: hidden;
}
#left {
width: 100px;
float: left;
}
#main {
width: 300px;
float: left;
}
</style>
<div id="container">
<div id="left">Left container</div>
<div id="main">Main container</div>
</div>