Pinterest layout mashed up

dabblet.css

/* Pinterest layout mashed up */
/* ----------------------------> See Line 8 of CSS for instructions of how the layout mashes up with Masonry */
div.statcol{ float: left; padding: 0px; vertical-align: middle; overflow: hidden; text-align: left; margin-bottom: 42px; }
/* div.statrow{ padding-top: 0px; vertical-align: middle; clear: both; float: none; } */
div.statrow { width: 100%; margin: 0 auto; overflow: hidden; }

.polaroid { padding: 10px 10px 19px 10px; background-color: #f7f7f7;
            display: inline-table; font-style: italic; line-height: 1.45em; } 
.statcol:nth-child(4) { padding-bottom: 40px; clear:both;  }
.statcol { text-align: center; }
.polaroid img { display: block; padding-bottom: 5px; }

dabblet.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://desbest.uk.to/clients/jessicashop/themes/jessicatheme/masonry.js"></script>
<script type="text/javascript" src="http://desbest.uk.to/clients/jessicashop/themes/jessicatheme/imageresize.js"></script>

<script type="text/javascript">  
$(function() {
    var $container = $('.statrow').masonry({
      itemSelector : '.statcol',
      columnWidth: function( containerWidth ) { // fluid columnwidth sizing
          return containerWidth / 4;
      }
    }).imagesLoaded( function() {
      $container.masonry(); // trigger masonry after images are loaded
    });
     
    $( ".polaroid img" ).aeImageResize({ height: 200, width: 180 });

});
</script>



<div class="statrow" id="stuffhere">
    <div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=1" title="Cutting Edge"><img src="http://desbest.uk.to/clients/jessicashop/uploads/1.jpg" alt="Cutting Edge"/></a><div style="max-width: 150px;">Cutting Edge</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=16" title="For Livs"><img src="http://desbest.uk.to/clients/jessicashop/uploads/16.jpg" alt="For Livs"/></a><div style="max-width: 150px;">For Livs</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=11" title="Full English?"><img src="http://desbest.uk.to/clients/jessicashop/uploads/11.jpg" alt="Full English?"/></a><div style="max-width: 150px;">Full English?</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=7" title="Gherkin?"><img src="http://desbest.uk.to/clients/jessicashop/uploads/7.jpg" alt="Gherkin?"/></a><div style="max-width: 150px;">Gherkin?</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=10" title="Head"><img src="http://desbest.uk.to/clients/jessicashop/uploads/10.jpg" alt="Head"/></a><div style="max-width: 150px;">Head</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=2" title="Headscarf"><img src="http://desbest.uk.to/clients/jessicashop/uploads/2.jpg" alt="Headscarf"/></a><div style="max-width: 150px;">Headscarf</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=14" title="Nothing more scared than the dog"><img src="http://desbest.uk.to/clients/jessicashop/uploads/14.jpg" alt="Nothing more scared than the dog"/></a><div style="max-width: 150px;">Nothing more scared than the dog</div></div>
    </div><div class="statcol" style="width: 25%;">
       <div class="polaroid"><a href="product.php?id=8" title="Peace"><img src="http://desbest.uk.to/clients/jessicashop/uploads/8.jpg" alt="Peace"/></a><div style="max-width: 150px;">Peace</div></div>
    </div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}