How to Create Equal Height Columns with CSS

Posted on: July 22nd, 2015 by BuildMyWeb No Comments

There is an ever-present need in the design world for containers of equal height within a document. Unfortunately, there is a serious lack of support currently for this concept. I’ve been hearing for quite some time that Flexbox is going to be our savior but support is not quite there yet.

In the meantime, there are several interesting techniques I’ve come across in recent history. Table display, display:table; (parent) and display:table-cell; (child) is frequently my go-to but recently I came across another css technique that is elegant and, I would think, even more tolerant of variations.

CSS Padding and Margins to the Rescue

In essence, you want to give an overly large amount of padding at the bottom of each child element and counter it with an equal amount of negative margin. Then, wrap the children in a parent container with an overflow:hidden; to clip off all of that excess at the bottom that we do not want.

The HTML:

Equal Height Columns HTML

The CSS:

Equal Height Columns HTML

Of course, no good article would be complete without citing our sources. The example code and my introduction to this technique came from http://callmenick.com/post/css-equal-height-columns-three-different-ways. I am not sure who ought to receive original credit for the concept. I do not see it referenced from nick’s site. Whomever you are, thank you!

Tags: ,

Leave a Reply