układ divów jak tekst w gazecie - jak uzyskać?

[Ace]

Witam,

Chciałbym ułożyć taki zestaw divów:

Kod:

<div id="zielony"></div>
<div id="czerwony"></div>
<div id="zolty"></div>

w sposób taki jak na obrazku:



Niestety przy zastosowaniu standardowego float:left; osiągam taki efekt:



Zdaję sobie sprawę, że dodając dodatkowe divy reprezentujące kolumny mogę uzyskać pożądany wygląd, ale wtedy pisząc kod html będę musiał decydować w której kolumnie dany box powinien się znaleźć, a na to nie mogę sobie pozwolić. Chciałbym, aby po prostu każdy box spływał nie tylko w lewo, ale i do góry. Wszystkie divy mają taką samą szerokość, ale różne (nieznane na etapie generowania htmla) wysokości. Czy ktoś ma pomysł jak osiągnąć to o czym piszę za pomocą css (w ostateczności java script/jquery)? Z góry dziękuję za wszelką pomoc