The IE Escaping Floats Bug

The Setup

Below is a div box with margins (10% on left and 40% on right) and 2px black borders. Inside are a number of left floated
divs dimensioned as 50px squares. Following the floats is a "cleared" div to make
the container div enclose the floats

In Opera and Mozilla it looks fine, but check it out in IE/win for a suprise.

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Major Problems

In Explorer for Windows there are two display errors. One, the container is only containing
the last line of floats , and the floats are also running off to the right, all the way to the
right screen edge! Take it from me, folks, that is not kosher.

Just to pour salt in the wound, this bug also causes a horizontal scrollbar at many screen sizes.
Try playing with the window width and see how when the last float line protrudes from the container,
the length of the protrusion translates into the size of the scrollbar. Interesting.

IE7 fixed most of the IE float bugs, but not this ugly customer! MS specifically stated that it would not
be fixed due to some kind of "technical reasons." Must be pretty ba-ad...

This CSS train wreck in IE/win is due to the lack of
hasLayout
on the black bordered container (div.floatholder). On many sites div.floatholder
would have a stated width, and that too will trigger hasLayout so the author never
sees this bug. Widths are not always desirable however, so it's a good thing we have the
Zoom Fix
To use instead.

The Zoom Fix In Action

Below is the same demo as above, except for the addition of the
Zoom Fix to div.floatholder:

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Other Uses

The Zoom Fix can be used to correct a number of IE/win float bugs besides this one,
mostly in IE6. With IE7, MS has managed to supress most float bugs and won't
need the Zoom Fix, but it won't be harmed either, so no worries there.