CSS Image Gallery Float BUG

Question

This is new one, I'm having problem with an Archive page i've made. It seems like a fairly straight forward floated div image gallery... but for some reason the there's a bunch of line breaks randomly throughout the divs. I thought it may have been a problem with Cufon or IE.JS etc but I disabled all JS and it still bugs out.

See: http://mais.ableobject.net/pressroom/issue/?page=2

Seems a bit long to post the code here, and I've thrown a bunch of unnecessary divs and clear fixes in but nothing seems to be working. I'll post and organize a proper report after I've figured it out.

Answer 1

Since some titles are longer than others, some line-break and thereby make the div taller. The floats will then "hang onto" these taller divs. It's not a bug per se, it's just how floating works.

 --- --- ---
 |1| |2| |3|
 --- | | ---
     --- ---
         |4|
         ---
 ---
 |5|
 ---

The best way to avoid this problem is to give each div a set height.

Alternatively, you can have the first div of each line "clear: left" by adding an appropriate class to each first/forth/seventh/etc div.

EDIT: To elaborate how this is floated: Each div tries to fit on the same line as the previous div, floating as far left as it can. If there's no space left on the line, it'll first be pushed down, then left. In the example above, 4 will be pushed down by 3, then it'll float left as far as it can, hitting 2. 5 is being pushed down by 4, then floats left as far as it can.