Question

Been noodling about with CSS for the first time in ages and I have a nasty feeling I’ve backed myself into a corner.

I’ve created a 3 column floating layout with this:

* {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

    #wrapper {
        width: 960px;
        background: silver;
        margin: 0 auto;
    }

#column-left {
    width: 240px;
    float: left;
    background: #f4d2d4;
    padding-top: 36px;
}

#column-center {
    margin-top: 41px;
    margin-left: 34px;
    margin-right: 34px;
    width: 492px;
    float: left;
    background: white;
}

#column-right {
    width: 160px;
    float: left;
    background: white;
    margin-top: 49px;
}

The left-hand column, as you can see, has a coloured background. But it doesn’t stretch to the bottom of the page, only to cover the content. And I need it to stretch all the way down.

Switching to position absolute or fixed screws up the 3-column layout. Using height: 100% has to go all the way back to body, and that messes everything up completely. Is there an easy way to fix this?

Answer 1

Dan Cederholm has a good way of making it look like the columns extend using a “faux column” technique. Rather than re-write it, I’ll link it here:

http://www.alistapart.com/articles/fauxcolumns/

Chris Coyier also has a good write up of ways different people have solved this if you ever decide to use a fluid layout:

http://css-tricks.com/fluid-width-equal-height-columns/