jqueryjquery-masonry

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

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?

Solution

  • 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
});