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.

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