3 Column Fluid Layout (100% height)

Posted on 8th Feb, 2009 in CSS Layouts, Popular Posts


Fluid layouts aren’t very easy to handle especially when you would like for your pages to expand not only horizontally but also vertically. With tables it’s much easier to handle this problem, however, when it comes up to table-less layouts there are a lot more things you would need to consider.

Here is an example of the 3 Column Fluid Layout expanding 100% of the page height & Sticky Footer.

The HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 3 Columns / Left/Right Sidebars / Fluid Width / Sticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="left-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="right-sidebar">
                <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

You can see it’s pretty straightforward, all the major section of the page are labeled appropriately. The only section that you might have a question about is the #footer-push, which is used to straighten up the footer, as explained and shown on the Ryan Fait’s example of the Sticky Footer.

The CSS code:


html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("right-sidebar-back.gif") repeat-y top right;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

/* IE6 Fix */
* html div#body {
    overflow: visible;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
    background: url("left-sidebar-back.gif") repeat-y top left;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 300px 0px 300px;
    padding: 20px;
}

div#left-sidebar {
    width: 260px;
    float: left;
    padding: 20px;
}

div#right-sidebar {
    width: 260px;
    float: right;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

The left and right sidebars are floating on each side of the page, they would need to have the same width as the two background images that you are using. Also if you would like to add padding to the sidebars you are going to need reduce the width with that amount.

Moreover, notice the body element, it will need to have 100% height and also to clear the floats we need to use the overflow: hidden option (for IE6 there is a bug and the overflow need to be visible to work out)

Here is an example of the 3 Column Fluid Layout expanding 100% of the page height.