Floating Columns beside higher element

I’m trying to get a css layout that has equal height columns. I’ve put together this demo on JSFiddle - http://jsfiddle.net/WebDevDude/5hYpk/2/

In a case where a column is higher then it’s siblings, I want the other columns to float beside. So in my demo case, column 3 and 4 should float beside column 2 on the left.

I also can’t assume that column 2 is going to be the tallest, it might be column 3, 4, or even 8. Does any CSS guru have the solution?

Float depending on element height? You may need to rely on JS

Even then, the problem there is WIDTH, and SOURCE ORDER. No matter what, a floated element cannot be higher than an element that precedes it in the source order. At most it can float ALL ELEMENTS beside each other, but for that all elements would need to fit withing the width of the container.

I think the best way to “hack” this is to use a background image - a term which was defined on A list apart as “faux columns” http://www.alistapart.com/articles/fauxcolumns/