Style Lists with Natural Behavior

Question

I want to create a css list like this

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

Basically this is not a 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 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 that you can do this in pure CSS if you don’t know in advance what each element will look like, and I assume that this is for the news section on the site that you are aligned with. You might be able to use something like the JQuery Masonry library to execute it.

Answer 2

, , , :

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

CSS3 . - 2 .