> It works fine in Firefox and IE but in chrome all the boxes overlap and I cannot work out why
I’m not very experienced, so my answer may not be very polished or even accurate but I hope my post helps.
I came across similar problems while using masonry, and it appears(I may be wrong) that the only way one can make them work is to not specify any width to the masonry container – let it remain the full 100% width. This should apply even to any parent container – none of them should have any fixed widths or heights (only the masonry blocks can have them). That seemed to fix the problem.
I did that on the browser and it did fix the layout somewhat. Not just that, the boxes even rearrange themselves when the browser is re-sized (with some fancy animated transitions). That is one way to check whether the plugin is working.
Edit : A few other things – it appears that you have used an id twice – an id should not be used twice. The above method that I mentioned fixes the masonry part, but you’ll have to work on the header. You haven’t cleared the float of the image properly.
Even if fixed now I don’t like that Masonry has to calculate all the layout, I’d rather be the one in charge with CSS, that’s why I use Salvattore. It uses a trick to use CSS as a syntax to set how the layout should work, even with media queries!