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

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.