Modern holy grail - 3 col layout

In the past, when I’ve needed a three columned layout I’ve used the same methods as Paul uses in his demo here:

However, I’m working on a new project which involves dynamically creating a huge variety of different layouts, and trying to incorporate some of the backwards compatibility of Paul’s setup into this application is really spinning my head!

So what I’m looking for is an uber simple three column layout, that works across IE, IE7, IE8, IE9 and the latest versions of Firefox, Chrome, Safari, Opera and any other common derivatives thereof. I don’t need backwards compatibility for Mac IE, old versions of Firefox or Opera or anything like that.

Any good examples out there?

EDIT: Jeepers, this is the first post I’ve made here in three months! Longest dry spell I’ve ever had on SitePoint I think.

I’ve started ripping all the extraneous stuff out of Paul’s demo and trimming it down to the bare essentials. I’ll post back here with a demo once it’s done.

On second thoughts, what I was actually trying to achieve wasn’t quite the “holy grail”, as I didn’t need the extended columns. What I’m trying to create is the simplest cross-browser compatible three column layout.

Here’s what I’ve got so far:

It seems to be working fine in Chrome, Opera, IE6, IE7 and IE9, but it it’s totally borked in IE8 and Firefox (see screenshot below). Any help figuring out why IE8 is so munted would be much appreciated :slight_smile: Thanks in advance for any help you guys can give.

EDIT: It has the same problem in Firefox too (thanks to Utkarsh Kukreti for pointing that out).

Utkarsh Kukreti noticed that I needed the asides set to 1px less than expected.

That fixes the bug in Firefox and IE8, but I’m not entirely sure how that helped :frowning: Paul’s original demo mentioned requiring 1px less to shunt the footer down, but my footer was sitting in place just fine (possibly because it’s totally separated from the other code unlike in Paul’s code).

I’m very confused :frowning:

Thanks for all the help so far, it’s much appreciated :slight_smile: … people have been replying through IM and Twitter instead of posting here.

So everything is fixed? Many updates to your posts :p.

Not exactly. The code works, my problem is that I don’t know why it’s working. The sidebars are 130px wide, but I needed margins of -129px which doesn’t make sense to me.

You have the header floated. You need to keep .wrapper from snagging onto the float.


Hi Ryan,

Sorry I missed your post :slight_smile:

As the other Ryan said you need to clear the header or the side columns snag.

There are also a couple of other tweaks you need.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<meta charset="UTF-8" />
<title>Three column layout</title>
<link href="index.css" rel="stylesheet" type="text/css" />
/* CSS reset */
body,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,tbody,tfoot,thead,tr,th,td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    font-family: sans-serif;
/* Header */
header {
    float: left;
    width: 100%;
    height: 100px;
    background: #ccc;
    text-align: center;

/* Content */
.wrapper {
    margin: 0 auto;
    max-width: 1024px;
    min-width: 400px;
* html .wrapper {
    width: 760px; /* Gives IE6 a fixed width (since it doesn't support max-width or min-width) */
    margin-left: 130px;
    margin-right: 130px;
    background: pink;
    min-height:0;/* ie7*/
* html #inner{
aside {
    position: relative; /* IE7 and older need this to show float */
    padding: 10px;
#aside-1 {
    float: left;
    margin-left: -130px; /* Must be 1px less than width */
    background: yellow;
#aside-2 {
    float: right;
    margin-right: -130px; /* Must be 1px less than width */
    background: orange;

/* Article */
article {
    padding: 20px;

/* Header */
footer {
    float: left;
    width: 100%;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;

/* Post contents */
.aligncenter {
    margin: 0 auto;
    display: block;
p {
    margin: 10px 0;

<!--[if lt IE 9]><script src="" type="text/javascript"></script><![endif]-->
<header>This is the header :)</header>
<div class="wrapper">
    <div id="inner">
        <aside id="aside-1">
            <p>This is sidebar #1</p>
            <p>This is sidebar #1</p>
            <p>This is sidebar #1</p>
            <p>This is sidebar #1</p>
        <aside id="aside-2">
            <p>This is sidebar #2</p>
            <p>This is sidebar #2</p>
            <p>This is sidebar #2</p>
            <p>This is sidebar #2</p>
            <p>Major bugs now fixed :)</p>
            <p>Major bugs now fixed :)</p>
            <p>Major bugs now fixed :)</p>
            <img class="aligncenter" src="" alt="Stewie Griffin" ?>
            <p>Information about this can be found in the <a href="">SitePoint CSS forum</a>. 
<footer>This is the footer :)</footer>

You can’t use the 100% heights on the inner elements because if they were working then they would be too high anyway.

The side floats should have a width that matches the side margins and once the header is cleared the negative margin can be exact and not one pixel out. It’s only older Firefox (about 1.5) that need the 1px overlap.

The middle content needs to have overflow:hidden applied or some other block formatting context (display:inline-block or float) otherwise any elements in the middle that have clear:both applied to will clear the side columns also.

Ie7 needs position:relative added in a couple of places and IE needs haslayout where I have used zoom but you can use something else if you don’t like zoom (but if you use height:1% then also add overflow:visible just in case.)

As you aren’t using the equal columns you could have just used a basic 3 column float without negative margins and saved a little complexity (although the negative margin layout seems to be more robust that normal floats at times). You can even float 3 columns when the center column is fluid but it’s a little trickier.

Awesome! Thanks for the input guys :slight_smile:

You have clearly learned a lot since I was last a regular around these parts!

:stuck_out_tongue: Gracias, most of my learning was due to Paul, so thanks are due to him.

You were a quick learner Ryan :slight_smile: