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.

    

        left
    
    

        middle
    
    

        right
    


        footer
    

​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/