Steve Ivy wrote: > > As many of us know, IE's float handling is broken in myriad ways. I > discovered one I had not yet seen (though from research it's come up a > number of times before on this list and elsewhere) this past week, and > spent some time putting together a test/demo page: > > http://redmonk.net/files/tmp/css/floated-box-rows.html > > In a nutshell, IE6 and 7 both treat float rule 8 (floats must go as > high as possible) [1] as more important than rule 5 (floats cannot > move above a the outer top of a previous block or float) [2]. In my > case, I ended up wrapping each "row" in yet another div, essentially > duplicating the code in a table.
Hi Steve, As far as I know, the trigger of the problem is the presence on the same element of float and clear (without this, IE/Win applies correctly the floats rules that you mentioned.) I have some test pages about various problems caused by this combination float+clear: [1] [2] [3]. Usually to work around these problems some changes to the markup are necessary, so I don't have any better solution then yours (my thumbnails page that you mentioned doesn't use floats but inline-blocks, which cause their own problems :-) In some specific cases other solutions are probably possible, for example if you really need just two "columns" you could, for IE/Win, make the boxes in the second column not floated (and remove their display:inline.) Bruno [1] http://www.brunildo.org/test/IEWfc.html [2] http://www.brunildo.org/test/IEWfc3.html [3] http://www.brunildo.org/test/IEWfc2.html -- Bruno Fassino http://www.brunildo.org/test ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
