Компактное расположение DIV в двух направлениях

DIV-ы легко расположить горизонтально с помощью поплавка. Например:

<div style="width: 500px;">
 <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="float:left; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div>
</div>

Это даст:

Но как расположить DIV по горизонтали и вертикали? В этом случае, как сместить красный и фиолетовый DIV вверх, где есть свободное место (под желтым и синим DIV)?

НОТА: Это всего лишь пример, и я хочу найти метод для организации любого набора DIV (не только в этом типичном примере).

Ответы на вопрос(5)

Ваш ответ на вопрос