3

I have not been able to find a way to use Isotope (or Masonry) with a fixed width outer container.

It always insists on re-sizing. I've looked through the options, code, google and here and haven't found the answer.

Is it even possible?

JoseK
  • 31,141
  • 14
  • 104
  • 131
Mary
  • 31
  • 1
  • 3

2 Answers2

3

Your question seems backwards to the problem I was having. Masonry works best with fluid containers but I wanted a fixed width of 980px on my center (main class ie: margin:0 auto; width 980px; )

Then masonry doesn't work... The fix is to find the center or whatever class u use to contain all content to a set width and change it from width to max-width:980px. This means ur still on fixed width centered container but masonry items will readjust / relayout upon resizing the browser.

I have a module I'm working on at www.digi2020.com - choose menu -> portfolio and u will see that does just this. I've added a lot of bells and whistles but a simple call to masonry will achieve same effect.

Inspect and Check out the .main class and the JavaScript on that page.

Another example using isotope on a fixed width that does not allow items to relayout on resize but still provides filtering can be found on pressedweb.com/portfolio

drew
  • 31
  • 2
  • Awesome, this answer helped me a lot. Google Chrome's zoom behavior is different than firefox (and safari, for that matter). Setting my masonry container to a fixed width caused the layout to break in chrome, but when I changed it to max-width it worked flawlessly. Thanks! – ryan508 Sep 06 '12 at 21:42
1

Usually this happens when you set the outer container to max-width. I have used width:960px and it does not interfere with the masonry grid after resizing the browser window. Maybe check all of your outer containers?

davecave
  • 4,698
  • 6
  • 26
  • 32