tips, CSS

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.

 

Add a comment

Name (required):

Email (required):

Location:

URL:

Text (limited HTML allowed, links automatically activated):

Remember my personal information

Notify me of follow-up comments?

Please enter the word you see in the image below:



View the Deepend showreel