Jquery Masonry checkerboarding
===

For some reason my jquery masonry treats col1 and col2 differently although they are the same in CSS (besides color and margin)

      $(document).ready(function() {
            $('#container').masonry({
                columnWidth:800
            });
                 
    $('#container').masonry({
                itemSelector: '.col1',
                columnWidth: 150
             });
            
            $('#container').masonry({
                itemSelector: '.col2',
                columnWidth: 150
            });
    });

Col2 sits to the right and is just below col1, just like a checkerboard.  Here is a link to JSfiddler with the code.  Can anyone spot why this results as such?
[JS Fiddler Code of this example][1]
Thanks,
Argyle


  [1]: http://jsfiddle.net/ArgyleGost/VBacg/29/