Keep those rows in line with this little jQuery snippet

I’ve recently needed this little snippet of code a few times over the last couple of months, I’ve never seen it documented so it’s probably obvious to anyone who isn’t me. But I’m going to stick it here just in case there are other people this has annoyed.

The situation: you have a series of elements (say divs or images) of equal width and floated left to give the visual impression of columns. However, this visual impression is broken when the elements start differing in height.

As you can see here, the 3rd and 4th elements are stacked, instead of breaking onto the next row.

While we could give the elements a fixed height, it’s not very nice for authors to have to tailor their content to a design.

So what we do is create a new clearing element at the end of the ‘row’.

We can actually do this with very little JavaScript: $('<div/>').css({
'width': '100%',
'clear': 'both',
'height': '0',
'border': '0'
}).insertAfter('div:nth-child(3n)');. This creates a new div element, applies a bit of CSS to stretch it and make it invisible, and then adds it after every third div (or image or whatever you want).

The full effect can be seen in the following jsFiddle:

Now purists will be screaming at me for using JS for the presentation layer, and they’d be dead on. Ideally we’d use CSS, and technically that can be done using something like div:nth-child(3n+1) {clear:left;} (I’ve only tested that in Chrome). Unfortunately, nth-child is only supported as of IE9 beta and so those chumps in MS-land won’t get the benefit of your genius design skills. Another way of attacking it is coding in those clearing divs in the source, but that’s pig ugly and I just plain don’t like it, but feel free to go that way if you wish (this would also get rid of the problem of people with JS turned off, but that’s a whole other discussion).

So yeah, no idea if that’s useful to anyone outside of me, but figured I’d put it out there if only to get some fresh content on this here blog.

Edit: Oh, and while I remember, this code is in use on my little Mixed Martial Arts news tracker that I knocked up while playing with Google App Engine. To see the effect of the code click some of the ‘+’s next to the news items and watch with glee as the entire row below slides up and down. Neat, eh?