css problem - "vodopad" divov

final

zdravím, vedel by mi pls niekto poradiť ako spraviť niečo také, ako je na prvom obrázku?

jedná sa o jeden hlavný div, v ktorom je niekoľko divov o šírke 49%, každý z nich môže mať rôznu výšku..

keď to dám všetko ako float:left, tak to narobí bordel ako je na druhom obrázku.. akosi ma nič nenapadá ako to spraviť.. ide aj o to, že ten float je tam dosť potrebný, nakoľko pri skracovaní šírky okna sa tie divy hodia pod seba do jedného stĺpca..

Tie divy sa nemajú presúvať medzi stĺpcami? Ak nie, tak ich umiestni do dvoch divov (a jednému nastav float: left;).

final

nerozumiem ako presúvať ?
keď je dostatočná šírka, tak sú v dvoch stĺpcoch.. a keď nie, tak sa dajú všetky do jedného stĺpca..

k tým dvom divom, to by som ale potom musel určovať, ktorý div má ísť do ktorého stĺpca

Skúšal si nastaviť, aby tie divy boli inline (a nie block)?

// chrono: Ale ty asi chceš, aby sa najskôr radili pod seba a až potom vedľa seba

final

teraz som skúsil, ale robí to dosť bordelu, s tým by to asi ani nešlo.. ešte poskúšam hlbšie..

// hm no nič, s tým inline to nevidím ružovo..

a to radenie, to je v podstate jedno.. hlavné je, aby sa tak pekne poukladali vedľa seba.. bez toho aby som ja nejak rozhodoval, ktorý div kam má zapasovať.. asi chcem ale veľa čo