How can I put items of different sizes in one page avoiding too many gaps between them?

Question

I have a set of rectangles of different sizes and I want to put them next to each other so there are as little gaps in there as possible:

but for:

<div class="box" >
    <div class="item item-001" ></div>
    <div class="item item-003" ></div>
    <div class="item item-005" ></div>
    <div class="item item-002" ></div>
    <div class="item item-004" ></div>
    <div class="item item-001" ></div>
    <div class="item item-001" ></div>
    <div class="item item-003" ></div>
    <div class="item item-004" ></div>
    <div class="item item-001" ></div>
</div>

and

div.box {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #EEE;
    padding: 3px;
}

div.item {
    display: inline-block;
    border: 1px solid orange;
    margin: 3px;
    width: 100px;
}
div.item-001 {
    height: 100px;
}
div.item-002 {
    height: 150px;
}
div.item-003 {
    height: 50px;
}
div.item-004 {
    height: 250px;
}
div.item-005 {
    height: 350px;
}

this is what I get:

Is there a way I could achieve that result with plain css? I want to avoid css3 and javascript and I want the result to run on older browsers. If that is not possible, then I'd like to know if it is possible with css3 and if not, then I guess I'll try javascript.

link to fiddle: http://jsfiddle.net/hamidsafdari/aa10xzzt/1/

Answer 1

If you use jQuery and you don't want to do all by yourself when someone has already you can have a look at this plugin that may help you: jQuery Masonry

This plugin builds a page layout like the one you are looking for. I that you asked to avoid JavaScript know but this way you will be sure that you have a fallback for older browsers.