How can I put objects of different sizes on one page, avoiding too many spaces between them?

Question

I have a set of rectangles of different sizes, and I want to put them next to each other so that there are as few spaces 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; } 

here is what i get:

Is there any way to achieve this result with simple css? I want to avoid css3 and javascript, and I want the result to work in older browsers. If this is not possible, then I would like to know if this is possible with css3, and if not, then I will probably try javascript.

fiddle reference: http://jsfiddle.net/hamidsafdari/aa10xzzt/1/

Answer 1

If you use jQuery and you don’t want to do everything yourself when someone can already see this plugin that can help you: jQuery Freemasonry

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

Answer 2

Since the elements are the same width, you can use the multi-column layout and place the elements one below the other.

 div.box { width: 100%; height: 100%; display: block; border: 1px solid #EEE; padding: 3px; -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } 

You may need to change the number of columns.

Fiddle

Answer 3

Apply font-size:0 to the parent elements and remove the margin from the child elements.

 div.box { width: 100%; height: 100%; display: block; border: 1px solid #EEE; padding: 3px; font-size:0; } div.item { display: inline-block; border: 1px solid orange; } 

Demo

Answer 4

 div.vertical{ height: 150px; width: 100px; } div.full{ height: 300px; width: 100px; } 

Fiddle

Try the above script