Three columns 100 percent height css layout

Question

I am really stuck with the css for this layout. Here is my html code :

<body>
    <div id="main">
        <div id="left">
            menu
        </div>
        <div id="middle">
        </div>
        <div id="right">
            sidebar
        </div>
    </div>
</body>

I want three columns left, middle and right with the width of 25%, 60%, and 15% percent width of the parent and all expand to the 100 percent height of their parent (main). in the mean time I want the main div to have a minimum height of the browser window and maximum height of its children.

Marc Audet · Accepted Answer · 2014-07-10T15:50:59.080

You can do it easily using CSS tables:

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.main {
    display: table;
    height: 100%;
    width: 100%;
}
.left, .middle, .right {
    display: table-cell;
    background-color: lightgray;
}
.left {
    width: 25%;
}
.middle {
    background-color: beige;
}
.right {
    width: 15%;
}

See demo at: http://jsfiddle.net/audetwebdesign/9L8wJ/

To fill the height of the view port, you first need to set height: 100% on the html and body elements.

Apply display: table to the parent container and set the height: 100%, and since this is a table, this value acts as a minimum value, so it will fill the vertical screen unless the content is very long, and in this case, the table height will automatically increase to contain the content.

Add widths to the left and right column, the middle will fill the remainder so no need to do the math.

Finally, apply display: table-cell to the three child elements.

You may want to add a wrapper around the content in each table cell is you want better control of the white space between columns, but it depends on you layout and design.

Three columns 100 percent height css layout

1 Answers1

Linked