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.

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.

• javascript
• jquery
• max
• jquery-masonry
• css

• 1 have you tried using the containerStyle option to masonry? – x1a4 Commented May 12, 2012 at 4:32
• I included the containerStyle option, but it doesn't seem to read it for some reason. Right now that should put position: absolute on the project wrapper, but it's not. – davecave Commented May 12, 2012 at 5:54
• Here is the fiddle. Not the best fiddle ever, but it works. If you can get it to not expand beyond 3 columns, you get a cookie. Don't worry about the weird hover states. jsfiddle/26dsg/4/embedded/result – davecave Commented May 12, 2012 at 6:11
• that !important seems to break your layout. Try without it. – user201788 Commented May 17, 2012 at 4:40
• It seems the resize issue it still happening after deleting !important – davecave Commented May 17, 2012 at 20:13

1 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; }