Styling lists with natural behaviour

Question

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 than 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

Answer 1

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.