Applying a clearfix to nth-child without additional markup

Question

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.

Pocahontas

Answer 1

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. ​

Odeen

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. – Precessional

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: jsfiddle.net/VsH7X/4 – Odeen

Made one more update: realized it should be :nth-child(5n+6). This was apparent when I added more rows to the markup: jsfiddle.net/VsH7X/5 – Odeen

Nice one! - the (5n+6) is where I was going wrong. I did try (6n + 6), amongst a few other random dabblings. – Pocahontas