title: Masonry/Isotope.js not working correctly
body: <p>I'm developing an wordpress theme and I'm using Isotope or Masonry for the masonry layout. Also I'm using Visual Composer to insert custom elements that i mapped to Visual Composer. I have a container which has no styles and all these items have a div with a class "overlay" that's absolutely positioned and has 100% width and height. It's purpose is to position the white box ( class "content" ) inside of it. Isotope has been giving me a hard time in a previous wordpress theme.. I have no idea why. Here's the image.
  <a href="https://i.stack.imgur.com/aZSWB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aZSWB.jpg" alt="The first box has around 25% width and the second one has 75% width. They add up to a total sum that&#39;s LESS of the container&#39;s width. I tried with boxes of multiple sizes and all it does is keep placing them one under each other. Can&#39;t see why... The image inside is an **img** element, it has 100% width."></a></p>
  
  <p>Here's the markup for an item:</p>
  
  <pre><code>&lt;div class="masonry-item"&gt;
      &lt;img/&gt;
      &lt;div class="overlay"&gt;
          &lt;div class="content"&gt;
              &lt;!-- Just some text here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ANY suggestions are more than welcome, because I can't seem to get it to work in ANY way. Most of the layout methods just end up overlapping all of the items in the most top left corner of the container. Yes, I've tried using ImagesLoaded.js, and it hasn't made a difference.</p>
  
  <p>Masonry JS:</p>
  
  <pre><code>$(".masonry-grid").isotope({
              itemSelector: '.masonry-item'
          });
  </code></pre>
  
  <p>.masonry-item CSS:</p>
  
  <pre><code>.masonry-item {
      position: relative;
      margin-bottom: 30px;
  }
  </code></pre>
  
  <p>It would seem that if they ALL have equal width like 50% it will work flawlessly. Like Deepak Thomas noted in the comments. But as soon as i put a random style for each element, like 30, 40, 50, 60, 70% width it starts to break. In some cases it would put elements next to each other, most of the time leaving a gap between them if they are not in the first row, and the other times it would just stack them one on top of another even though the two items can clearly be put side to side and still have room to spare.</p>
  
  <p>EDIT: Tried removing the image. No difference.</p>
  
  <p>Thanks in advance!</p>