Question

I am using Jquery isotope to arrange divs of different sizes.

When the html is this:

<div id="feed">
    <div class="item size1">
    </div>     
    <div class="item size1">
    </div>                 
    <div class="item size1">
    </div>     
    <div class="item size1">
    </div>      
    <div class="item size1">
    </div>
</div>

The grid arranges nicely :

But when I change the html to this:

<div id="feed">
    <div class="item size2">
    </div>     
    <div class="item size1">
    </div>                 
    <div class="item size1">
    </div>     
    <div class="item size1">
    </div>      
    <div class="item size1">
    </div>
</div>

The grid looks like this:

The feed div is 540px wide, but I want the width to be used completely before more rows can be filled, its not happening in the 2nd case.

The jquery looks like this:

$('#feed').isotope({
    itemSelector: '.item',
});

Answer 1

The above problem got resolved by providing a finite value for the property columnWidthlike this:

$('#container').isotope({
  masonry: {
    columnWidth: 240
  }
});

More here.