I have a masonry container inside of a div that has display:none in inline style. Because I have a few divs, when the page loads it switches like a slideshow when their button is clicked. This interferes with masonry's ability to gauge the height on load so consequently the bricks spill out of the container.

I have a masonry container inside of a div that has display:none in inline style. Because I have a few divs, when the page loads it switches like a slideshow when their button is clicked. This interferes with masonry's ability to gauge the height on load so consequently the bricks spill out of the container.

• javascript
• css
• height
• jquery-masonry

1 Answer 1

Update: the .load() part of my answer is not how this should be done.

See: http://masonry.desandro./layout.html#imagesloaded

You can fix it by:

• Adding overflow: hidden to .panel to clear the floated elements inside.

• Running Masonry on .load() instead of .ready():

  <script type="text/javascript">
      $(document).load(function (){
        $('#contain').masonry({
          itemSelector: '.item',
          columnWidth: 100
        });
      });
  </script>
  

Version with those fixes: http://jsbin./oyido4/4