CSS Vertical Stack

Question

I currently have a bunch of inline-block divs stacked up horizontally. When the container is full, they spill over nicely into the next row:

Is it possible to do the same thing vertically, without changing the HTML?

To generate this picture, I had to move each column into a container div. I can't modify the source HTML, so this isn't an option.

CSSDesk

Answer 1

CSS2
Alas, to my knowledge this is not possible with pure CSS and HTML. I do know there is a jQuery plugin Masonry that does this quite nicely though.

CSS3
Using CSS3's Multi-column Layout Mode you can achieve the question's layout (though it won't have as many options as abovementioned masonry). IE support is from 10 and up I think, and you may need some browser prefixes. The non-prefixed version would look something like this (on your container):

column-count: 3;
column-gap: 10px;
width: 480px;

The above was adapted from this blogpost that links to this demo (though there are others too).