Four widget columns aligned
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.
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)