jquery masonry: nth-child() adds unneeded margin to child nodes

Question

I am trying to use the awesome jquery masonry plugin -> http://desandro.com/resources/jquery-masonry/

The plugin works just fine, however I have problems creating a layout where I use an nth-child() selector to get rid of a margin-right on every third element.

#footerwidgets li.widget {
    margin: 0px 24px 24px 0px;
    width:340px;
}

#footerwidgets li.widget:nth-child(3n) {
  margin-right:0px;
}

Since my container for this widget is exactly 1068px wide, three widgets fit in perfectly (because the last widget has no right margin).

When I try to use the jquery masonry plugin, this behaviour gets ignored! Only two columns fit in. (The plugin works, so all widgets get floated in masonry style.) When I inspect the elements, every third element has a right margin of 24px as well. So nth-child is ignored.

Any way to make that working?

Answer 1

With jQuery, remove margins and use Masonry's gutterWidth option in its place.

CSS:

#footerwidgets li.widget.masonry-brick { margin: 0; }

jQuery:

$('#footerwidgets').masonry({
  gutterWidth: 24
});