Question

I am using jQuery Masonry to display a grid of boxes (all the same size).

Here is my testing site.

Works great when the browser width is 1100px or below.

When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.

I have a max-width set on the outer container, but Masonry doesn’t seem to acknowledge it and just keeps expanding the width of the Masonry container.

On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.

How can I add a hard rule to say, “This is the maximum width. Stop trying to add more columns.”

Thanks

UPDATE
Here is a jsfiddle, although I”m not sure if it’s even set up correctly. It’s best just to go to my testing site to see the problem.

Answer 1

Setting a max-width on the parent element of the masonry’ed container works for me. Is this not the result you’re looking for?

#wrapper { max-width: 990px; }