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

4
votes

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?

2
jqueryjquery-masonry
What browser did you test this in? The nth-child selector is CSS 3, so the support is still a bit limited. Internet Explorer doesn't support it until version 9. – Guffa
I'm using chrome and or safari – matt

2 Answers

10
votes

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

Masonry does not work well with variable-sized margins. You have three columns and a container of 528px. Your best bet is to go with three columns of 176px. Each columns would have a margin of, say 12px and a width of 152px.

If you want your total width minus left and right margins to be 528px, then expand the container to 544px (528px + 2 x 12px) and your columns' width to 160.