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. (Diagram is missing overflow auto in the middle).

For what it is worth: here is my current fiddle (where I decided to trial a table, hrmmmm).

http://jsfiddle.net/valamas/m8R43/6/

Additional: Printscreen as mentioned in comments. Occurs when dragging/selecting down the page after adding a header. See: http://dabblet.com/gist/3753308

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/