title: Jquery Isotope: making horizontal Masonry
body: <p>I am trying to build a horizontal version of JQuery Masonry using JQuery Isotope. I want my result to look something like this:</p>
  
  <p><a href="http://isotope.metafizzy.co/demos/layout-modes.html" rel="nofollow">Layout-modes</a> (CLICK THE masonryHorizontal OPTION).</p>
  
  <p>As per the sites instructions: 
  <a href="http://isotope.metafizzy.co/docs/layout-modes.html#masonryhorizontal" rel="nofollow">Masonry Horizontal</a>
   my script looks like:</p>
  
  <pre><code>$('#isotopecontainer').isotope({
          itemSelector : '.item',
          masonry : {
            columnWidth : 270
          }
   });
  </code></pre>
  
  <p>However, 2 things are happening:</p>
  
  <p>1) when the page loads the height of the <code>#isotopecontainer</code> div is set at 60px so you only see the tops of the <code>.item</code> divs.</p>
  
  <p>2) if you resize the browser the <code>#isotopecontainer</code> div expands but the <code>.item</code> divs do not line up like the example.</p>
  
  <p>Can anyone help point me in the right direction at all? My demo site is <a href="http://clarkeconstructions.com.au/newsite/" rel="nofollow">here</a>.</p>
  
  <p>Thanks.</p>