The Holy Grail of CSS: Equal Height DIV Columns

Back in prehistoric web times, we used tables for our column layout needs. Now we know better and use CSS and DIVs instead. However, getting side-by-side DIVs to extend to equal height has proven to be quite the elusive task. Until I stumbled upon Ed Eliot’s brilliant, simple solution for equal height DIVs using CSS, I played all sorts of reindeer games.

Let’s explain. Say you have a 3-column layout, one DIV for each column. Each column has content of differing length. Left to their own devices DIVs will only expand as far as their content. This is not an issue unless you have a background of some sort or color assigned to each DIV, and you want all the columns to be of equal height.

Ed’s solution involves a few lines of CSS to each of your DIVs: the outer container, the left DIV, the center DIV, and the right DIV.

The HTML:

Lorem ipsum dolor sit amet
Lorem ipsum dolor
Lorem ipsum



And here is the CSS. The values for margin-bottom and padding-bottom are arbitrary:

.container
{
    width: 350px;
    margin: 0 auto; 
    overflow: hidden; 
}

.leftColumn
{   
    float: left;
    width: 100px;
    background-color: green;
    color: #fff;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
  }

.centerColumn
{   
    float: left;
    width: 100px;
    background-color: red;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

.rightColumn
{  
    float: left;
    width: 100px;
    background-color: yellow;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
  }



Here’s the finished example:

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor
Lorem ipsum

Subscribe to comments Comment | Trackback |
Post Tags: ,

Browse Timeline


Comments ( 10 )

Nice and clean, thanks.

John Goodman added these pithy words on Jan 26 11 at 6:08 pm

I really like this solution becuase it’s clean and simple. I don’t like the fact that the added margin and padding are a fixed value though. It’s hard to ensure a dynamic page will display as intended.

I think using a percent is a good solution…

column a

column bLine 2Line 3Line 4Line 5

Column C

Im still new to CSS to correct me if this is incorrect. Also I used within each div just for example’s sake. I find it a little easier to follow.

Dyson added these pithy words on Mar 08 11 at 7:46 am

Bummer, my code didnt post…

But basically I used:

Padding-bottom:100%
and
Margin-Bottom:-100%

for each column or div. This ensures that the columns will fill the container no matter how large a single column becomes.

Dyson added these pithy words on Mar 08 11 at 7:49 am

After two weeks trying to figure out how to do this, I found your web with this simple and very clever solution.

Thanks very much!

perro.flaco added these pithy words on Sep 11 11 at 4:28 am

After trying (and failing) to implement the most difficult equal height column tricks (I needed the left border, not the background to extend) – I found this and my css is clean again. It works crossbrowser, is easy and intuitive.
Many thanks

Jojo added these pithy words on Oct 13 11 at 6:07 am

Thank you very much for sharing your solution online :D !
Works great ;) !

Gabe T. added these pithy words on Mar 09 12 at 2:44 pm

Thanks very much this is a great, clean solution

Michael Cole added these pithy words on Jul 09 12 at 3:29 am

Excellent – went through pages and pages looking, all kinds of trials – then i found this and in 2 minutes voila – the solution – thank you

David Mac added these pithy words on Apr 10 13 at 7:34 pm

Simple solution but I need each of the columns to have a border with radius corners and shadows. S the overflow:hidden of the parent container causes the columns borders and shadows to be just cut off!
Is there away that will work for this?

Doug added these pithy words on May 27 13 at 5:21 am

Add a Comment

You must be logged in to post a comment.


© Copyright 2009-2010 Alpha Papa Hotel . Thanks for visiting!