Columns with the Same Height

If the people always want one thing, it’s columns that are the same height. Am I right, people?

It’s one of those annoying things that are really easy with table-based layout, but weirdly tricky when using proper CSS methods. In my time, I’ve made plenty of faux columns (columns that aren’t even but are in front of a background image that looks like two even columns) and I’ve used JavaScript to fix the column heights when the page loads.

Unfortunately, this week I found I needed two equal-height columns that each generated their own CSS box-shadow and that would respond to dynamic content that was constantly changing the height columns should be. On the first count, faux columns were out, and the second count would mean adding extra triggers to keep the JavaScript firing every time the column height changed, which was just too annoying.

Thankfully, I found yet another solution to this problem here: “Equal Height Columns using CSS” by Ed Eliot

First, you add a ridiculously amount of bottom padding to both of your columns, causing their backgrounds to extend past where the bottom should be. Next, you add an equal negative bottom margin, which tells the rest of the page to ignore all that padding. Finally, you surround the two columns with a container and tell that container to hide overflow, which will cut down the backgrounds to just below the bottom of the content of the tallest column. Voila.

Thanks, Ed.

Tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>