Compact arrangement of DIVs in two directions

Answer 1

you could use position:absolute css property along with top,left to achieve the same.

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

Live demo

Answer 2

Or if you are no big fan of absolute positioning (like I am) try this:

<div style="width: 500px;">
    <div style="float: left;">
        <div id="yellow"></div>
        <div id="red"></div>
    </div>
    <div style="float: left;">
        <div id="blue"></div>
        <div id="purple"></div>
    </div>
    <div id="green"></div>
</div>

With the corresponding CSS:

#red {
    width: 180px;
    height: 200px;
    background-color: Red;
}

#yellow {
    width: 200px;
    height: 100px;
    background-color: Yellow;
}

#blue {
    width: 150px;
    height: 60px;
    background-color: Blue;
}

#green {
    float: left;
    width: 140px;
    height: 240px;
    background-color: Green;
}

#purple {
    width: 130px;
    height: 160px;
    background-color: Purple;
}

Here's a small demo.

Answer 3

For arrange divs vertically you may use jquery plugin masonry

It has effect like this:

This plugin is very easy to use:

    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.item',
      });
    });

and this live demo showed how it work in your example

Answer 4

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/

Answer 5

You can do it without manipulating the markup like this:

<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:right; width: 140px; height: 240px; background-color:Green;margin-right:10px"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;margin-top:-40px;margin-left:20px"></div>
</div>

Check the fiddle

http://jsfiddle.net/E6VkW/