Force Masonry/similar to ignore flow and fill gaps instead

Masonry/Isotope/Freetile and the rest do a great job at absolute positioning elements in a grid/container. However, when an element takes the full width of the grid/container, it creates massive gaps which is not an acceptable outcome. Here is a jsfiddle to my problem: http://jsfiddle.net/QNf3A/1/ There's enough room on the top of the red div to place a green one. However, the different libraries tend to respect the flow as opposed to a "leave no gaps" philosophy. Does anyone know of an alternative js library or similar trick to avoid gaps? Code from jsfiddle... HTML: ``` <div id="container"> <div class="block half"></div> <div class="block full"></div> <div class="block half"></div> <div class="block half"></div> <div class="block half"></div> </div> ``` CSS: ``` #container{ width: 600px; background-color: #EEE; } .block{ float: left; } .half{ width: 300px; height: 100px; background-color: #CFC; } .full{ width: 600px; height: 100px; background-color: #FCC; } ``` JS/jQuery: ``` $(function($) { $('#container').masonry({ itemSelector: '.block', columnWidth: 300 }); }); ```