How to create equal height columns in pure CSS

Question

How to get your div to reach all the way down? How to fill up the vertical space of parent div? How to get equal length columns without using background images?

I spent a couple days googling and dissecting code to understand how to accomplish equal length columns as easy and efficient as possible. This is the answer I came up with and I wanted to share this knowledge with the community copy and paste style in a little tutorial.

For those that think this is a duplicate, it is not. I was inspired by several websites, among them http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks but the code below is unique.

Answer 1

For a simpler solution, you can give the parent display: table and its children display: table-cell, like this:

.parent {
  display: table;
}
.child {
  display: table-cell;
}

See DEMO.

Please note that this does not work in IE7, so if IE7 support is required, a more elaborate solution would be needed.