The BEST way to clear floats

Sometimes when building a web page you need to force a containing element to extend downwards, so that it wraps around a floating element nested inside it. Commonly this is achieved by including an extra element below the floated element, and applying clear:left

<div style="border: 5px solid red;">
<div style="float: left; background: blue; height: 200px; width: 200px;">
</div>
<br style="clear: left" />
</div>

Over the last couple of years there have been other attempts to solve the float wrapping problem, including the complex :after method.

But while struggling with a complex layout the other day, I was pointed to this much better solution on Quirksmode:


div#container {
border: 5px solid red;
overflow: auto;
width: 100%;
}

This is pretty nice, and doesn’t need any hacks.

Sometimes specifying width:100% could create box model problems if you have to have horizontal padding. In that case any width or height dimension will do for IE, and you could hide this away using a conditional comment if necessary. Thanks to Suzy for helping me out with this.