title: CSS column count causing items to split columns
body: <p>Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives.</p>
  
  <p>I am trying to use column count, which appears to be working but not as expected.</p>
  
  <p>So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example:</p>
  
  <p><a href="http://jsfiddle.net/DTcHh/3858/" rel="nofollow">http://jsfiddle.net/DTcHh/3858/</a></p>
  
  <pre class="lang-css prettyprint-override"><code>#builds {
    width: 100%;
  }
  .cols {
    -moz-column-count:4;
    -moz-column-gap: 3%;
    -moz-column-width: 25%;
    -webkit-column-count:4;
    -webkit-column-gap: 3%;
    -webkit-column-width: 25%;
    column-count: 4;
    column-gap: 3%;
    column-width: 25%;
  }
  .item {
    height: auto;
    width: 100%;
  }
  </code></pre>
  
  <p>I am using pagination for the items from a database, and sometimes everything works fine but others it doesn't.</p>
  
  <p>Any logic as to why / what im doing wrong?</p>