css - Compact arrangement of DIVs in two directions

Question

It is easy to arrange DIVs horizontally with float. For example:

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

This will produce:

But how to arrange the DIVs both horizontally and vertically? In this case, how to shift the Red and Purple DIVs upper where there is empty space (under Yellow and Blue DIVs)?

NOTE: This is just an example, and I wish to find a method to make the arrangement for any set of DIVs (not only this typical example).

Answer 1

Assuming you are working with a dynamic set of arbitrarily sized objects, there is no pure CSS method to achieve this. You can get close by using a CSS3 multi-column layout if:

1. You only need to support modern browsers.
2. All objects can be arranged into equal-height groups.

Here, objects are arranged in groups of 300px height.

<div id="blocks">
  <div style="height: 100px; background-color: yellow;"></div>
  <div style="height: 200px; background-color: blue;"></div>
  <div style="height: 300px; background-color: green;"></div>
  <div style="height: 200px; background-color: red;"></div>
  <div style="height: 160px; background-color: purple;"></div>
</div>

#blocks {
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  column-count: 3;
  column-gap: 0;
  width: 450px;
}
#blocks div {
  width: 150px;
}

http://jsfiddle.net/RTLun/