Question

<div class="rectangle-wrapper">
        <div class="rectangle-3 rect-box">
            <div class="image-wrap">
                <img src="img source here" alt=""/>
            </div>
            <div class="controls">
                <i class="icon-arrow-up icon-2 icon-it"></i>

                <div class="text-3">69</div>
                <i class="icon-arrow-down icon-3 icon-it"></i>
                <a onclick="" href="#" class="btn-rect">
                    <div class="rectangle-4 rect-btn">
                        <div class="text-4">Sho Frenz</div>
                    </div>
                </a>
                <a onclick="" href="#"class="btn-rect">
                    <div class="rectangle-5 rect-btn">
                        <div class="text-5">Aii Waant!</div>
                    </div>
                </a>
            </div>
        </div>
</div>

 $(".rectangle-wrapper").masonry({
                itemSelector:".rect-box ",
                columnWidth:240,
                isFitWidth:true,
                gutterWidth:0
            });

I have using masonry from http://masonry.desandro.com/ and found a problem that it’s not work in firefox and IE.

it’s show me as expect 4 elements in the single rows. In Firefox and Ie their is only 2 elements show on elemnts and other place is a spaces.

Can someone let me know how I can fix it.

Answer 1

Looking at it in Chrome’s devtools, you got it setup wrong. Masonry operates on elements within a container. Don’t just put other things in there like headers and footers. You don’t give the container a height and width – the width is determined by the viewer’s browser window, the height by the number and size of elements. The basic setup is organised like this:

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

The elements should ideally follow a module width and height wise, as you can see in the original documentation. Then you call Masonry like this:

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});

It is all in the documentation here.