monkinetic weblog

Steve Ivy's Weblog - Since 1999 - XII Ed.

Floating Boxes in Rows

Last week I ran into an IE6/7 CSS bug, but in 5 hours of research did not find a solution I liked. In a nutshell, IE incorrectly implements, or incorrectly interprets, the CSS 2.1 float spec:

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document. CSS 2.1 Visual formatting model, rule 5

Read more about it in the bug demo page: Float Boxes in Rows. I'd really appreaciate some feedback in the comments if you have any ideas.

UPDATE: It appears that Bruno Fassino has a thumbnail page that may demonstrate a way to solve this problem, though I've not yet had time to inspect it carefully enough that I'd feel comfortable implementing it.

Posted by

My name is Steve Ivy and I write about technology, the open web, social software, and general nerdity on monkinetic.com. You should follow me on Twitter or subscribe to this blog if you like what you're reading. I spend my days hacking Movable Type, python, Django, and various other efforts at Wallrazer. This is my personal site.