1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Escaping floats

Problem

If a series of floats are placed inside a container with no specified width or height- and the floats' width exceeds the natural width of the container, the container will not expand vertically to fit the floats— and the floats will extend outside the container.

Solution

Specify zoom: 1 for the container (inside a conditional comment).

Detailed description

If a series of floats followed by a clearing div is placed inside a container with no specified width or height, and the floats' width exceeds the natural width of the container, the container will not expand vertically to fit the floats—and the floats will extend outside the container in Windows/Internet Explorer 6 and earlier. Other potential pitfalls include horizontal scrollbars appearing in the page when the window is resized to alternate widths.

This bug was originally reported and documented by Big John Gallant and Holly Bergevin at positioniseverything.net. (Read original article)

The old (pre-IE7) solution for this bug, and several others, was the Holly Hack. However, the Holly Hack relies on buggy behavior that is no longer present in Internet Explorer 7 -- and using it can cause things to go a bit haywire. Instead, use an Internet Explorer Conditional Comment (IECC) to apply zoom: 1 to the container in all versions of Internet Explorer. This will give the container the "layout" it needs to keep the floats from escaping.

<!--[if IE]>
<style type="text/css"> 
#containerID { zoom: 1;}
</style>
<![endif]-->

Text ID: ESCAPING_FLOATS

---