challenge: make irregular-height floats behave like equal height floats
...without changing the height of the elelements
My goal is to make attached screenshot number 1 look the same as attached screenshot number 2.
The "broken" version just has a set of floated elements with fixed widths. The problem is the floated elements jump up when an element in the row above it becomes higher than the elements after it in its own (visual) row.
In the fixed version I added clear:left to the first element in each visual row. There are no tags to wrap the rows.
I've been unable to come up with a way for the floats to stop popping out of the row. I guess it's just the way that floats are designed but that doesn't prevent me from trying to hack it :)
I attached a zip file with the html/css I used to make the screenshot. If you open the page and it doesn't look broken, make your browser window narrower and it will break.