Box packing with CSS

Question

I'm trying to solve the classic box packing/knapsack problem with a CSS layout.

I would like to arrange many boxes in a way that minimizes whitespace between elements, like this;

_{(source: tydus.net)}

CSS3 columns work VERY well here - boxes are arranged sequentially, but all white space is consumed efficiently. There is a teeny weeny problem - boxes are "sheared", or span across multiple columns. Can't do that.

I used the classic div.clearer after some boxes, but that had no effect - the boxes still spanned over those CSS3 columns. There is a column-span CSS property, but it's not supported in any browser yet ;(

Optionally, I could define the columns myself and arrange the boxes by hand, but realistically the boxes change height very frequently.

Final question: Is there a way to arrange boxes in a way that minimises whitespace between boxes using pure CSS?

Thanks!

Answer 1

Although I haven't tried it myself yet, one possible answer may be to use the jQuery Masonry plugin. This seems to fit the requirements you state.

Doing this in pure CSS and HTML willl be very hard, you'll have to probably let go of some wishes/requirements...