How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?

Question

How can i have a layout similar to this?

I have seen a few solutions that are not quite right for me. Examples and comments I have seen suggest this is not possible.

Answer 1

You can use normal divs.

One wrapper, three inner divs for the left, middle and right. One footer under the wrapper div.

<div id="wrapper">
    <div id="leftSide">
        left
    </div>
    <div id="middle">
        middle
    </div>
    <div id="rightSide">
        right
    </div>
</div>
<div id="footer">
        footer
    </div>

​Then you use the display: table; and table-cell; on the wrapper and its inner divs:

#wrapper
{
    width: 100%;
    height: 400px; /*whatever*/
    display: table;
    padding: 0;
    margin: 0;
}

#left,
#middle,
#right
{
    display: table-cell;
}

​Set the widths for the left and right elements and the middle will magically fill up the space.

#left
{
    width: 100px;
}

#middle
{
    background: #00f;
}

#right
{
    width: 200px;
}

The display: table; and table-cell; styles mimic the behavior of tables but allow the markup to be semantic elements.

It is supported by all browsers except IE<=7.

http://jsfiddle.net/Kyle_Sevenoaks/m8R43/9/

Answer 2

If you're not too concerned about source order: http://dabblet.com/gist/3748868

It uses a bit of a hack to get the footer to display on screen on lower viewport heights:

body {
    border-bottom: 100px solid; /* height of footer */
    box-sizing: border-box;
    }

The 'border-box' property is explained here: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Basically, what it does is, it makes elements contain borders and paddings inside them. So, the bottom border given to the body here will stay inside the viewport, as opposed to sans-border-box.
This makes it kind of like a negative space which can be accommodated by the footer. I used 'border' because you may want to tinker with the padding.
As for the footer, it's fixed positioned, so it's relative to the viewport, not the layout which is what you'd get with absolute positioning. Hence it lying on top of the bottom border of the body (which shares its height value).

The center block is fluid because I gave it the 'overflow: hidden' property, which clears floats( http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ ). It will also work without overflow, but it can cause issues.
Since you want to be able to scroll when the content inside the columns are larger than the content height, I've added a container inside the center column, and gave it overflow: auto.