Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Aligning Columns With Multiple Children

, 17 Jun 2012
Rate this:
Please Sign up or sign in to vote.
Ever wonder how to align columns so that they're all the same height, without using tables?

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)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Benaiah Mischenko
Student
United States United States
I am a web developer living in Wasilla, Alaska. I have been working in web development since 2010. I have been programming since I was ten, starting out in .NET and migrating to WordPress and PHP.
 
Other than programming, my interests include photography, music (vocal, guitar, and theory), writing (prose, poetry, and screenplay), and spending time with my six brothers and one sister.
 
You can visit my website at benaiah.mischenko.com
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 17 Jun 2012
Article Copyright 2012 by Benaiah Mischenko
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid