Using nth-of-type to create grid blocks that clear
Aug '0924th
10
Problem: You want to create a grid based layout with floats, but you don’t want to wrap things in extraneous divs to force blocks to clear properly.
In an ideal world, all the content is the same height, and blocks will float and clear properly. But this is not an ideal world.
So below is what happens if the content in some blocks is longer than others. Yeugh.
We could specify the height, but this is a really bad idea. You can’t guarantee that the content in the blocks will always be the same height, and you’ll get ugly overlaps if you’re wrong.
One way of achieving this is by wrapping a div round the first three blocks which clears the content above.
But this means adding extraneous divs to your markup.
If we know how many blocks are going to be in each row, we can tell which ones to clear using the nth-of-type selector.
So this clears the 4th, 7th and 10th block
.block:nth-of-type(4),
.block:nth-of-type(7),
.block:nth-of-type(10) {
clear: both;
}
And this adds margins onto every first and second block in a row. (You can probably think of a more streamlined way of doing this if you’re better at maths than me!)
.block:nth-of-type(1),
.block:nth-of-type(2),
.block:nth-of-type(4),
.block:nth-of-type(5),
.block:nth-of-type(7),
.block:nth-of-type(8),
.block:nth-of-type(10),
.block:nth-of-type(11) {
margin-right:40px;
}
Browser Compatibility:
Unfortunately, not many browsers currently support this. Firefox 3.1+, Safari 4.0, Chrome, Konqueror, and Opera (albeit incorrectly). But if you’ve got a high proportion of users on these browsers, you can have a go at implementing this and get it to degrade quite nicely.
10 Comments on “Using nth-of-type to create grid blocks that clear”
August 24th, 2009 at 11:01 pm
I’ve not thought about using that before. It’s a shame we can use CSS selectors more because of compatibility.
August 25th, 2009 at 10:50 am
Hiya Anna,
Nice little trick there, I have seen something similar done with JS before to catch the browsers that have not quite kept up with the game.
^licks^
Jamie & Lion
August 25th, 2009 at 10:52 am
I agree with Matt, haven’t heard of it before, and have a cracking project that it would be really useful for.
As you specified Anna, it is only supported by a few browsers, and not the monster that is IE. I guess it’s deciding what’s the lesser of two evils, using more divs than necessary, or using hacking your CSS to please Mr IE.
Great post :-)
August 25th, 2009 at 10:54 am
Hey Anna,
I’ve thought of doing much the same sort of thing a few times. One interesting thing about
nth-of-typeis that you can pass in a ‘number expression’ instead of just a number. What that means, then, is that you could, rather than explicitly coding for 4, 7, and 10, use ‘3n + 1’, and that would always apply clearing after 3 elements.August 25th, 2009 at 11:00 am
@Steve – yes, writing 3n + 1 is a much better way of doing it and was just the streamlined solution I was looking for.
August 25th, 2009 at 11:10 am
Hehe, I’ve been playing with nth-child the last day or two too, and find the math involved less than ideal. I’d not thought of using it for a layout solution like this though, nice one.
August 25th, 2009 at 11:15 am
Very interesting, I have never heard of this selector before, and something I can think of using in a few instances already.
Haven’t had a chance to play about yet, but ccan borders and the like be applied too? I’m thinking of a product listing page, where you might not want a left/right border on the first and third item.
August 25th, 2009 at 11:16 am
Wicked. Didn’t now about nth of type at all. Thanks for the demo.
(Aside: i like the 4 degrees of rotation on the profile pics for these comments. Nice touch! :) Not sure I like it so much on the RHC Flickr stream though. Seems a bit much there.)
August 25th, 2009 at 11:21 am
@Ewan Yep, if you apply them to the block they can. They just work like any other divs. In the example I’ve given, I applied a 40px right margin to the first and second blocks in the row.
@Emily Thanks! Yeah, the flickr stream does look a bit funny because they’re all tilting the same way, but I’m considering using the nth-of-type to tilt some in the other direction. This site is more of a sandpit than an attempt at a good design! ;)
August 25th, 2009 at 12:26 pm
Used nth-of-type in jQuery before but didn’t even know t was a CSS selector. Pretty exciting, can’t wait to use it.
I guess a possible fall back for the likes of IE and older browsers could come in form of :
.block + .block + .block, .block + .block + block + .block + .block + .block { clear : both;}It’s a horrendous alternative but if it means I can play with nth-of-type, I’m in!
Leave a Reply