Question

This is driving me crazy.

I am building a page which will only have a predefined header and footer, the content between them will be a set of boxes (dynamic) that have to be properly positioned in order to fill the wrapper.

Here is an example: http://jsfiddle.net/rdMKQ/1/

HTML:

<div id="wrapper" >
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:80px;height:60px;background-color:yellow"> 3 </div>
    <div class="box" style="width:40px;height:30px;background-color:green"> 4 </div>
</div>

Non-Inline CSS:

#wrapper{width:180px;}
.box{float:left}

All the boxes float:left and the sizes I used are just ‘random’ as a matter of example

What can I do to position the green box (4) just below red one (2) to fill the gap?

Requirements of the solution:

• I can not define specific styles for a single box, styles should be common to all boxes
• Boxes can not overlap

PD: I’ve already tried the jQuery Masonry Plugin to let him make the work filling the gap in JS, but no luck, there’s no option that does what I need.

Many thanks in advance for your help.

Answer 1

It can be done, but not with your existing HTML flow.

Here is an example:

<div id="wrapper" >    
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:40px;height:30px;background-color:green"> 4 </div>
</div>
<div class="box" style="width:80px;height:60px;background-color:yellow;"> 3 </div>

And

#wrapper{width:100px;height:60px;float:left;}
.box{float:left}