Space between DIVs even after sing jquery Masonry - jquery-masonry

Question

I am trying to arrange several dynamically multi-sized DIVs to fit in a container. As per members advice here in stackoverflow, I am trying to get the benefit of jquery masonry to get my job done. But I have problem as described below.
Is their any special tricks when using jquery masonry to solve this problem? I read their documentation, but I surely missed something.
If anybody can help, it'll be highly appreciated.
HTML CODE:
<div class="blockscont">
<div class="blocks" style="width:200px;height:200px">A</div>
<div class="blocks" style="width:400px;height:400px">B</div>
<div class="blocks" style="width:200px;height:200px">C</div>
<div class="blocks" style="width:200px;height:200px">D</div>
<div class="blocks" style="width:200px;height:200px">E</div>
<div class="blocks" style="width:200px;height:200px">F</div>
<div class="blocks" style="width:600px;height:200px">G</div>
<div class="blocks" style="width:200px;height:200px">H</div>
<div class="blocks" style="width:200px;height:200px">I</div>
<div class="blocks" style="width:400px;height:200px">J</div>
</div>
JQUERY MASONRY:
$(function() {
$(window).load(function(){
$('#blockscont').masonry({
itemSelector : '.blocks',
columnWidth : 0
});
});
});
OUTPUT:

Answer 1

I don't see a problem using Masonry for this layout, as long as the container is the correct size you will get the format you want.
I've set up your example in jsFiddle and it seems to work ok.
HTML (same as yours)
<div id="blockscont">
<div class="blocks" style="width:200px;height:200px">A</div>
<div class="blocks" style="width:400px;height:400px">B</div>
<div class="blocks" style="width:200px;height:200px">C</div>
<div class="blocks" style="width:200px;height:200px">D</div>
<div class="blocks" style="width:200px;height:200px">E</div>
<div class="blocks" style="width:200px;height:200px">F</div>
<div class="blocks" style="width:600px;height:200px">G</div>
<div class="blocks" style="width:200px;height:200px">H</div>
<div class="blocks" style="width:200px;height:200px">I</div>
<div class="blocks" style="width:400px;height:200px">J</div>
</div>
Script (simplified for use in jsfiddle)
$(function(){
$('#blockscont').masonry({
itemSelector: '.blocks'
});
});
I've removed the option columnWidth : 0 as it does not seem to make any difference.
CSS
.blocks {
background-color: #D7E4BC;
outline:1px solid white;
}
outline is used, not border, to show the blocks but prevent their size increasing and messing up the layout (in Chrome at least).
There should be no need to apply floats to any element as it is Masonry's job to position the blocks.

Answer 2

Just for posterity (as i came across this while having a similar problem) Gaps in the layout can be cause by incorrectly setting the columnWidth.
If you don't explicitly state the columnWidth it is taken from the width of the first item. My problem came about because my first item was supposed to cross two columns. I got over this by using another item's width to set columnWidth.
$('#m-container').masonry({
itemSelector: '.m-item',
columnWidth: $('.size1')[0]
});