Jquery masonry: nth-child () will not work?

Question

Hey guys, I'm trying to use the awesome jquery masonry plugin -> http://desandro.com/resources/jquery-masonry/

The plugin works fine, but I am having problems creating a layout where I use the nth-child () selector to get rid of the field on the right of 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 1068 pixels, the three widgets fit perfectly (because the last widget has no right)

When I try to use the jquery masonry plugin, this behavior is ignored! Only two columns are available (the plugin works, so all widgets become floating in the masonry style). When I check the elements, every third element has a 24px right edge. Therefore nth-child is ignored.

How to do it?

Answer 1

Use jQuery to remove the fields and use the gutterWidth Freemasonry option in its place.

CSS

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

JQuery

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

Answer 2

Freemasonry does not work with variable size fields. You have three columns and a container of 528 pixels. It’s best to go with three columns of 176 pixels. Each column will have a margin, say 12px and a width of 152px.

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