Floating DIVs of different heights

I would like to float a series of divs that are all of different heights so that they 'pack' tightly. See image below:



Is this possible?

 

You'll get the second version in IE because of its bugs. Otherwise, the only way you'll get that is to make columns full of non-floated boxes, and float the columns. Yes, that means extra wrapping divs around bunches of the boxes you were hoping to float, but that's how I'd do it to get it working cross-browser.

In compliant browsers, you'll get strange stackings depending on height of individual boxes. Instead of wrapping down like IE does, they stay stacked to the side, at strange intervals. Let's see if I can ascii this:

____
|    |
|    | ____
-----  |    |
       |    |
       ------      

Code (markup):

Wrapping everyone in columns then can avoid this. Otherwise, you'd have to be very precise in your heights, which is bad when your fonts and text-sizes can change from computer to computer.