Outer Padding and Margins with Masonry / Isotope

jquery width jquery-masonry jquery-isotope
davecave picture davecave · Aug 19, 2011 · Viewed 17.6k times · Source

I have been struggling with Isotope for a while now. After a few different sittings, I can't seem to figure this one out.

isotope.metafizzy.co/index.html

I'll illustrate my problem with images, but here is the explanation. As you can see on my site,

test.davewhitley.com/not-wp/isotope_test/index.php

I am using isotope with three same-width columns.

If you look at the outer edges of the central layout, you can see that there is some padding, forcing the whole center to be somewhat narrower than the header / footer. I have played with CSS to my heart's content, but I can't figure out how to expand the central gallery to the edges of the div that it is contained it (it is 960px — therefore, the central gallery is about 940px). Normally I could do this with just divs and some CSS, but masonry's javascript is over my head (all of its calculations and such). Any help would be greatly appreciated.

Here is my problem illustrated. What I have:

http://farm7.static.flickr.com/6207/6057816365_e0b6e2e8c4.jpg

What I would like:

http://farm7.static.flickr.com/6208/6058362460_d1200a1491.jpg

Sorry for the linked images and non-hyperlinked text, I am too young on this site.

Answer

desandro picture desandro · Aug 30, 2011

See Masonry with gutter width mod for Isotope:

Related questions

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More
How to get screen width without (minus) scrollbar?

I have an element and need it's width without(!) vertical scrollbar. Firebug tells me body width is 1280px. Either of these work fine in Firefox: console.log($('.element').outerWidth() ); console.log($('.element').outerWidth(true) ); $detour = $('.child-of-element').offsetParent(); …

Read More
jQuery - Get Width of Element when Not Visible (Display: None)

It seems like in jQuery when an element is not visible width() returns 0. Makes sense, but I need to get the width of a table in order to set the width of the parent before I show the parent. As …

Read More