This situation is really getting to me.
I am currently in the process of creating a page that will feature a fixed header and footer, with dynamic boxes sandwiched in between. These boxes need to be properly arranged to fill the space within the wrapper container.
For reference, 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 dimensions used are just placeholders for demonstration purposes
How can I position the green box (4) directly below the red one (2) to fill the gap?
Solution Requirements:
- I cannot apply specific styles to individual boxes, the styles should be uniform across all boxes
- The boxes cannot overlap
PS: I have attempted using the jQuery Masonry Plugin to automatically handle the spacing in JavaScript, but unfortunately, it does not offer the needed functionality.
Your assistance on this matter is greatly appreciated. Thank you in advance.