title: Isotope auto height fix
body: <p>I have an issue with the layout, please find below for the image. How can I fix the layout for this? I want the height to be auto size, and the width to be (container width / 5)</p>
  
  <p>Thanks in advance!</p>
  
  <p>CSS </p>
  
  <pre><code>.element-item {
    position: relative;
    float: left;
      width:20%;
    -webkit-box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
  -moz-box-shadow:    2px 2px 5px rgba(136, 136, 136, 0.8);
  box-shadow:         2px 2px 5px rgba(136, 136, 136, 0.8);
  }
  </code></pre>
  
  <p>PHP Loop</p>
  
  <pre><code>&lt;div class='element-item $folder' data-category='$folder'&gt;
  &lt;div class='portfolio-thumb'&gt;
  &lt;figure&gt;
  &lt;a href='$file' class = 'fancybox' data-fancybox-group='$folder'&gt;&lt;img class = 'lazy' data-original='$thumb'' /&gt;&lt;/a&gt;
  &lt;/figure&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery Code:</p>
  
  <pre><code>     var $win = $(window),
          $con = $('.isotope'),
          $imgs = $("img.lazy"),
          scroll = $('body').scrollTop();
  
    var $width = $con.hasClass("no-space") ? 0 : 20;
  
    var $container = $con.isotope({
          itemSelector: '.element-item',
          // options...
          percentPosition: true,
          resizable: false, // disable normal resizing
          // set columnWidth to a percentage of container width
          columnWidth: $con.width() / 5,
          masonry: { columnWidth: $con.width() / 5 },
          filter: '.cables'
    });
  
    var event = $.Event( "click" );
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/EV7yM.jpg" alt="Current Output"></p>