Skull Jackpot

Various thoughts of minimal interest to others

Design Pattern: Self-clearing floats

January 8, 2009

Originally published on the TOPP Design Blog

Problem Summary

An element needs to be expanded to contain all child elements, one or more of which may be floated (and thus removed from the normal document flow). ­

Use When

The page contains floated elements w­hich should not extend beyond their parent element.

Solution

Use self-clearing floats.

Rationale

While the “use a float to contain a float” approach will ensure that all elements are appropriately contained, it can trigger other renderbugs which this approach avoids.

Example

self-clearing-floats

CSS

.selfclear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.selfclear {
display: inline-block; /* IE 7 */
}

.selfclear {
display: block;
}

* html .selfclear {
height: 1px; /* IE < 7 */
}

Note: this method builds upon the approach documented at http://positioniseverything.net/easyclearing.html.

One comment to “Design Pattern: Self-clearing floats”

  1. July 2 2009 at 10:01 pm Cory wrote:

    This was invaluable for something I was just struggling with. Thank you!

Leave a comment

HTML - You can use:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>