Timm Timm - 1 month ago 13
CSS Question

CSS box "flow"/stacking (see screenshot)

I'm having a hard time making boxes flow as illustrated in the attached screenshot. Seeing as I'm not even quite sure what this technique is called, it's making googling hard.

The boxes with be generated using jQuery's AJAX implementation if that makes a difference.

UPDATE:
Thanks Jonathan, that's close but it's apparent I haven't described the problem well enough. Each box contains a categoryHeading, and an unknown number of records (bookmarks) related to that heading -- might be two, might be 50.

Let's say I have six bookmark categories (boxes). Since users can enter as many or few bookmarks as they please into each category (which is also unlimited), I really don't know how big any of the boxes will be.

In the newly attached illustration, this is illustrated better, I hope.

I'd prefer not to be stuck with a fixed number of columns, since the container width depends on the screen resolution of the user.. so low resolution might only have room for two columns, while higher resolution/bigger browser width has room for five columns.

I can somehow mimick this using http://welcome.totheinter.net/columnizer-jquery-plugin/, but it's not perfect, and IF there's a strickly CSS way of doing it, that'd be much prefered.

Using the code Jonathan suggested, it would work well if each category contained about the same number of bookmarks and I was ok with using a fixed column layout, but when one category contains 50 bookmarks, while another one only contains three, a lot of space goes to waste.

See: Ole screenshot/illustration

See: New illustration

Answer

Nope. If you can't count on the number of columns there is no CSS-only solution (though it looks like there will be in CSS3 - a fun thought). You'll need JS.