Stretch with ease: you and your CSS floats container

One of the major difficulties in CSS-based web layouts is manipulating the height of elements. It was actually easier using the old tables method. There are two main difficulties: IE does not support min-height; and the container of floated elements is not supposed to vertically stretch to encompass those floated elements it contains.

A quick easy solution I find myself doing often is creating a little stretcher div after the floated elements. In the HTML you add this:

<div class="holder-stretcher">&nbsp;</div>

While in the CSS you define the holder-stretcher class:

.holder-stretcher { clear: both; line-height: 0px; }

A bit ugly in your source code but saves a lot of hair.

 
View the Deepend showreel