Aligning Columns With Multiple Children

Four widget columns aligned 

Ever wonder how to align columns so that they’re all the same height, without using tables? There are plenty of tutorials and scripts out there, but they usually have one glaring flaw – they are nearly all designed for a column with one item which can be easily extended. This is not the case in situations such as widget columns with multiple widgets. To remedy this, I wrote a pretty simple JavaScript+jQuery solution that can easily align your columned widget areas.

I was working on the dev version Covenant Bible Church website (not currently out, should be soon), but what kept bugging me were the different heights of the homepage and footer widget areas. The site is built on the Outreach theme by StudioPress, and the theme has three widget areas on the homepage below a slider in a series of columns, and four footer widgets also in a series of columns. Problem was, despite the well-aligned widgets in the StudioPress demo, the widgets are not actually automatically aligned. Thus, there was a lot of imbalance and weird dead space. I figured that extending the last widget in each widget area to fill the remaining height of the widget group would make things look better. This proved to be somewhat harder than I had anticipated.

Rather than being a simple CSS fix (actually, as I realized later, I could have done a CSS hack with a wrapper div, but I think my solution works better, and it doesn’t require editing theme files), it ended up being a JavaScript solution – specifically, one using jQuery to dynamically calculate and generate the correct heights after the page was loaded.

The function takes three arguments, two of which are optional. The first is the element (as a string to use in a jQuery DOM query), which should be the last element in the column to be aligned (I used the function as a handler on the  jQuery(“#footer-widgeted .widget:last-child”).each event with jQuery(this) as the element argument to align these widgets). The next argument is the container whose height must be matched (normally, its height would already be stretched to the height of the tallest widget area, as in my case). If no argument is given, this is assumed to be jQuery(element).parent().parent() – since the first parent is the widget area wrapper. If you have a layer between your column group wrapper and your column wrappers, you’ll need to set this yourself. The final argument, padding, simply allows for you to take arbitrary padding and margins into account – the function itself should take care of almost all of them, but I had to use it for the footer widgets due to some of the wrappers having paddings.

You can download the function here: fillremainder.js (8)