4

First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:

http://jsfiddle.net/bb_matt/VsH7X/

Here's the explanation - my rationale:

I'm creating a responsive site using the 1140 grid framework. It's a fairly complex layout.

I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements. Each of the li elements has a right margin of 5%. I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.

Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.

The only remaining issue to fix is to clear between rows. I can't add additional html markup and I want to steer clear of overly complex jquery fixes.

I know of two ways to fix this, but I'm not keen on either of them.

First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.

Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.

user1697652
  • 248
  • 4
  • 6

1 Answers1

6

I updated your fiddle here: http://jsfiddle.net/VsH7X/5/

I added a clear: left to the first item in each new row.

ul.gallery li:nth-child(5n+6) {
  clear: left;
}

Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under. ​

zxqx
  • 5,115
  • 2
  • 20
  • 28
  • 1
    You don't need about half of the properties there in your `:after` rule which cater to the older browsers that don't support `:nth-child()`. Namely, `content` can be an empty string, and you don't need `height: 0` or `visibility: hidden`. – BoltClock Sep 25 '12 at 19:18
  • You're right. I also just realized that you don't even need the `:after` clearfix at all, since the first element of each new row having `clear: left` effectively handles that for us. Updated: http://jsfiddle.net/VsH7X/4/ – zxqx Sep 25 '12 at 19:21
  • Made one more update: realized it should be `:nth-child(5n+6)`. This was apparent when I added more rows to the markup: http://jsfiddle.net/VsH7X/5/ – zxqx Sep 25 '12 at 19:28
  • Nice one! - the (5n+6) is where I was going wrong. I did try (6n + 6), amongst a few other random dabblings. – user1697652 Sep 25 '12 at 20:21