Layout of columns which automatically fill fixed width container vertically?

I've got elements with different heights but fixed width in a container element. When I set the elements 开发者_StackOverflow社区to inline-block, the columns fill up automatically, but horizontally, like this. Please notice the numbers, indicating an element.

1## 2## 3##
### ### ###
###     ###
        ###
4## 5## 6##
### ### ###
###
7## 8## 9##
### ### ###
        ###

What I'd like is to have them fill up vertically too, like this.

1## 2## 3##
### ### ###
### 5## ###
4## ### ###
### 8## 6##
### ### ###
7##     9##
###     ###
        ###

And lets assume the width of the container element is increased.

1## 2## 3## 4##
### ### ### ###
### 6## ### ###
5## ### ### 8##
###     7## ###
9##     ###
###
###

Is there any way to do this with just HTML and CSS?

CSS layouts don't support this. You'll have to use a Javascript layout tool like Masonry to achieve the effect you're looking for.

You can use CSS3 Columns (Compatibility table) to do this. For example:

ol {
    list-style: decimal outside;

    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

The multi-column module is not supported in IE9 (but it will be in IE10). To avoid the child elements being split up you need the break-inside property:

ol li {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

Unfortunately this is not supported in Firefox (Bugzilla).

Here's a demo: http://jsfiddle.net/Q4BNm/2/