isotope masonry responsive layout not arranging <p>As you can see, the images are behaving rather weird, they do not arrange themselves until the browser width gets rather small. What am i doing wrong ? I notice as the window gets smaller, the items have overlapping dimnesions.</p> <p>HTML</p> <pre><code> &lt;div class="masonry container"&gt; &lt;div class="col-sizer"&gt;&lt;/div&gt; &lt;div class="item width2"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-1.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-2.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item height2"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-3.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-4.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-5.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-6.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-7.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-8.png" alt="a"&gt; &lt;/div&gt; &lt;div class="item width2"&gt; &lt;img class="img-responsive" src="../images/sc/masonry-9.png" alt="a"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.masonry .item { float: left; max-width: 25%; max-height: 244px; } .masonry .item img { width: 100%; } .col-sizer { max-width: 25%; } .masonry .item.width2 { max-width: 50%; } .masonry .item.height2 { max-height: 488px; } </code></pre> <p>JQUERY (on document ready)</p> <pre><code>$(".masonry").isotope({ itemSelector: '.item', masonry:{ columnWidth: $(".masonry").find('.col-sizer')[0] } }) $(".masonry").isotope('layout') </code></pre>