Styling lists with natural behaviour

I want to style a css list like this

[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ 5 ][ 6 ]

Which is basically no problem when using float:left But there is a problem, when [ 4 ] is heiger tha开发者_开发百科n 3 the following happens:

[ 1 ][ 2 ]
[ 3 ][ 4 ]
     [   ]
[ 5 ][ 6 ]

But i want to behave it like this:

[ 1 ][ 2 ]
[ 3 ][ 4 ]
[ 5 ][   ]
[ 7 ][ 6 ]

Please take a look at the problem: http://xbox360livegold.nl/gastenboek

---

I don't think you'll be able to do this in pure CSS unless you know ahead of time what each item is going to look like, and I'm assuming this is for the news feed section on the site you lined to. You might be able to use something like the JQuery Masonry library to accomplish it.

---

If you're okay with the items being displayed from top to bottom instead of left to right, i.e. like this:

[ 1 ][ 4 ]
[ 2 ][   ]
[ 3 ][ 5 ]

then you could use the CSS3 multi-column feature. Setting the column-count to 2 will automatically divide the items into two columns.