Ik buig me op dit moment over een layout uitdaging en die is als volgt.
Mijn doel is om het volgende te krijgen:

Dit heb ik al bereikt maar op een statische pagina.
Daarbij heb ik 3 kolommen met "float: right;" gebruikt en de inhoud erin geplaatst.

Nu wil ik ditzelfde bereiken, maar dan op een dynamische pagina.
Maar om alle berichten uit een database te trekken en dan ook nog gelijkmatig over 3 kolommen te verdelen vind ik wat lastig. Dus ik dacht, als ik nu gewoon op alle blokken "float: right;" toepas, dan kom ik al een heel eind.

Het resultaat is dan alleen (uiteraard) het volgende:

Zoals zichtbaar sluiten die blokken dus niet meer goed op elkaar aan.
Is er een manier met float (of een andere slimme manier) om die blokken a la Tetris (maar dan omhoog in plaats van naar beneden) in elkaar te laten glijden?

Een voorbeeld van hoe het zou moeten is hier:
http://www.effektivedesign.co.uk/

Al vast bedankt voor het meedenken!

Als je de code van die site bekijkt zie je dat er gebruik gemaakt wordt van een JQuery-script: Masonry.

http://masonry.desandro.com

Dat bestaat omdat het met pure css niet mogelijk is (in elk geval niet voor de meeste browsers)…

Naar mijn weten is dat (nog) niet met alleen CSS op te lossen al kun je wel andersom denken.

Wat als je ipv naast elkaar onder elkaar gaat werken als constructie.
Dus nieuwe berichten komen eigenlijk niet horizontaal te staan maar verticaal. Het enige dat je dan moet doen is elke rij voorzien van een eigen categorie die je verbergt en ook niet zichtbaar is voor de bezoekers.

Hoe gaat dat in zijn werk. Je maakt 4 categorieën aan in je CMS laten we even als voorbeeld nemen col1, col2, col3 en col4.
Daarna maak je binnen je template op 1 rij ook 4 maal een kolom aan met ieder zijn eigen loop (query) per categorie.

Dus: | query cat. col1 | query cat. col2 | query cat. col3 | query cat. col4 |

Bij elke query geef je dan aan max. 10 laatste blog posts binnen die categorie en klaar is kees op een simpele manier.
Het enige dan je zelf moet doen is tellen eerste blog post Tag je met col1. tweede met col2 enz enz enz. Dan heb je toch alles horizontaal en op datum naast elkaar staan.

Kijk hier als voorbeeld.
http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

Maar er zijn ook manier om dit te doen met Javascript
http://masonry.desandro.com/ <-- dit wordt op het voorbeeld gebruikt.