Es fácil organizar los DIV horizontalmente con flotador. Por ejemplo

<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>

Esto producirá:

¿Pero cómo organizar los DIV tanto horizontal como verticalmente? En este caso, ¿cómo desplazar los DIV rojos y púrpuras hacia arriba donde hay espacio vacío (debajo de los DIV amarillos y azules)

NOTA Esto es solo un ejemplo, y deseo encontrar un método para hacer los arreglos para cualquier conjunto de DIV (no solo este ejemplo típico).