É fácil organizar DIVs horizontalmente com float. Por exemplo

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

Isso produzirá:

Mas como organizar os DIVs horizontal e verticalmente? Nesse caso, como deslocar os DIVs vermelho e roxo para cima, onde houver espaço vazio (em DIVs amarelo e azul)?

NOTA Este é apenas um exemplo, e desejo encontrar um método para fazer o arranjo para qualquer conjunto de DIVs (não apenas este exemplo típico