3 column fluid layout with header, sticky footer and 100% height columns

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

Leave a Reply

Your email address will not be published. Required fields are marked *