I recently had need of a site layout with the following features

• a header
• 3 fluid columns
• 100% or full height columns
• a sticky footer
• correct source order of columns
• IE8 compatible

The only existing solutions I could find either used table based layouts or background image techniques to get the columns to display at 100% or full height.

So I decided to code my own version of the layout. Inspired by some of the CSS techniques I came across in my hunt and using jQuery to get the required column heights.

Demo and the code

References

• 3 column fluid layout (100% height) by Choppr
• jQuery Makes 100% Height So Much Easier by Nicholas Barger