Question

I had it working but for some reason it has just stopped working and I don’t know what I have done.The box divs are floated left, I just don’t know where I’ve gone wrong.

Jquery

var $container = $('.work');            
$container.imagesLoaded(function(){                 
   $container.masonry({
      itemSelector: '.box',
      isAnimated: true,
      columnWidth: 250                  
   });
});

HTML

<div id="part-one" class="work">
   <div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div>
   <div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div>
</div>

CSS

.work {
   margin-left:98px;
   top:0;
   max-width:1600px;
   padding-bottom:100px;
   position:absolute;
}

Answer 1

Remove your columnWidth property and Masonry will use the width of the first item element. (Docs).

Check out this JSFiddle. http://jsfiddle.net/s8PhS/14/

If you resize the HTML container in JSFiddle it will also resize dynamically.
I also added some extra <div> elements for demo purposes and a Odd Five element with a different height, and you can see the masonry plugin kicks in and position’s the elements perfectly.

So basically, remove the property columnWidth: 250 and let Masonry pick it up dynamically.

In JSFiddle, this seems to solve your problem.

---

Just a tip: I used this same jquery.masonry plugin recently, but also wanted to sort my elements, I found this amazing plugin called Isotope which is amazing and much more customizable.

Check out the Demo on the Homepage!