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.

Quentin, This is NOT a duplicate. My code was INSPIRED by (among others) http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks but it is further simplified and altered, although I don't remember exactly what the difference is, long time ago I wrote it. — Paul, May 31 '15 at 07:50
Use this site for this kind of issue: http://callmenick.com/post/css-equal-height-columns-three-different-ways — Suraj Mevada, Apr 21 '16 at 12:19

zxqx · Answer 1 · 2013-10-30T18:36:49.043

25

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.

edited Oct 30 '13 at 18:36

answered Feb 08 '13 at 00:00

zxqx

5,115
2
20
28

As I said in my initial answer: "You can also do this by using CSS table cells, but unfortunately the browser support for this is still shady, so it's not a preferred solution." But thanks for your add, it made me realize that IE7 is not used by so many people any more, I just checked the stats on [Statcounter - http://gs.statcounter.com](http://gs.statcounter.com) So far I have kept checking everything I do in IE7 since it is the sorrow child of web development, still alive. – Paul Feb 08 '13 at 17:10
Also, your table-cell example is showing a set height. Most times you don't know what height it will be, or don't want to set the height, just the width. The code should therefore be slightly different. [Like in this example.](http://jsfiddle.net/vtajZ/2/) – Paul Feb 08 '13 at 17:20
Good point. If you don't need a set height, you can just remove the parent's height. This will set the height of each child to the height of the tallest child. – zxqx Feb 08 '13 at 18:00
maybe you could edit your answer slightly to aid whoever comes next to see this? – Paul Feb 17 '13 at 07:45

score 7 · Accepted Answer · answered Feb 07 '13 at 23:51

One of the tricky things in modern web design is to create a two (or more) column layout where all the columns are of equal height. I set out on a quest to find a way to do this in pure CSS.

You can easiest accomplish this by using a background image in a wrap-div that holds both of your columns (or the background of the page).

You can also do this by using CSS table cells, but unfortunately the browser support for this is still shady, so it's not a preferred solution. Read on, there is a better way.

I found my inspiration from two pages on the web, although I prefer my solution, since it gives me more freedom to use rounded corners and precise widths or percent layouts, and it is easier to edit, your final layout holding div is not forcing you to do negative number crunching.

== The trick: ==

First you create the background design cols, then you put a full width div that can hold your regular content. The trick is all about floated columns within columns, creating a push effect on all parent columns when the content extends in length, no matter what end column is the longest.

In this example I will use a 2 column grid in a centered wrap-div with rounded corners. I have tried to keep the fluff out for easy copy-paste.

== Step 1 ==

Create your basic web page.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

== Step 2 ==

Create one floated div inside another floated div. Then apply a negative margin on the inside div to pop it out of its frame visually. I added dotted borders for illustrating purposes. Know that if you float the outside div to the left and give the inside div a negative margin to the left, the inside div will go under the page edge without giving you a scroll bar.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        this content obviously only fits the left column for now.
    </div>
</div>
</body>
</html>

== Step 3 ==

In the inside div: Create a div without background that has the with of all the columns combined. It will push over the edge of the inside div. I added a dotted border for illustrating purposes.This will be the canvas for your content.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
    float:left;
    width:400px;
    border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            this content spans over both columns now.
        </div>
    </div>
</div>
</body>
</html>

== Step 4 ==

Add your content. In this example I place two divs that are positioned over the layout. I also took away the dotted borders. Presto, that's it. You can use this code if you like.

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            <div id="leftcol">left column content</div>
            <div id="rightcol">right column content</div>
        </div>
    </div>
</div>
</body>
</html>

== Step 5 ==

To make it nicer you can centered the whole design in a wrap div and give it rounded corners. The rounded corners wont show in old IE unless you use a special fix for that.

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
    position:relative;
    width:500px;
    margin:20px auto;    
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="rightsideBG">
        <div id="leftsideBG">
            <div id="overbothsides">
                <div id="leftcol">left column content</div>
                <div id="rightcol">right column content</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

== Inspiration sources ==

How to create equal height columns in pure CSS

2 Answers2

Linked

Related