Masonry js won't bunch images vertically
===

The images are being aligned horizontally correctly but they are all spaced out vertically.. Take a look here http://brstudios.co.uk/testing to see what I mean properly..

My mark up is as followed (simplified):

    <html>
    
    <head>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>
    
    <script type="text/javascript">
      var $container = $('.portfolio-container');
      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector : '.break',
          columnWidth : 429
      });
    });
    </script>
    
    <style type="text/css">
    .break {
        float: left;
        width: 429px;
        margin: 10px 20px;
      }
    </style>
    
    </head>
    
    <body>
    
    <div class="portfolio-container">
    
    <?php do { ?>
    
    <div class="break">
    
    // Contents taken from MySQL //
    
    </div>
    
    <?php } while ($row_displayPosts = mysql_fetch_assoc($displayPosts)); ?>
    
    </div>
    
    </body>
    
    </html>

I think part of it is working but as you can see by the link provided it isn't moving the elements together vertically. Does anyone have any pointers?


