Thursday, October 11, 2007

Floats Wrapping Priority - Internet Explorer vs Firefox

I ran into this problem while trying to make the PageLayer toolbar to behave properly.

The toolbar is a collection of float left divs containers (toolsets) embedding other float left divs (buttons / links). In a way, it has an onion skin structure: floats inside floats inside ... floats.

The problem is, as you can see in the screenshot, about priority: Firefox makes the outer divs wrap first (what you expect), Internet Explorer makes the inner divs wrap first (what you execrate).



I could not find much help online as it appears not to be a very well known problem (?).

The (very bad) solution I have got so far is to "clear right" the innermost divs which has for effect to make the containers (toolsets) to wrap properly but to lock the cleared divs: they do not wrap anymore in IE.

As anyone worked out a good solution for this problem? I'd like to hear about it!

No comments: