How to create a sticky footer in pages

When we were developing the Tesco Property Market website there was a requirement to be position the footer either at the bottom of the browser window or at the end of the content if it was over one screen high. On the original site I wasn’t able to acheive this, due to the way some of the web controls had been coded the side bars had to be absolutely positioned and were often taller than the main content.

With the recent redesign I completely scrapped the existing templates and started again doing away with the absolute positioning. However, none of the techniques I’d used in the past for footer positioning worked and for the life of me I couldn’t work out why.

Eventually the answer dawned on me; the form element that .net annoyingly insists on wrapping everything in was not being targeted by the CSS. Once I’d realised that it was fairly straightforward to get the footer working. Here’s how I did it:

The basic xhtml structure for your page should look like this

  1. <body>
  2. <!– Stupid form required by .net –>
  3. <form id=“form1” runat=“server”>
  4. <div id=“container”>
  5. <div id=“contents”>
  6. <!– Everything apart from the footer goes in here–>
  7. </div>
  8. </div>
  9. <div id=“site-info”>
  10. <!– footer stuff–>
  11. </div>
  12. </form>
  13. </body>

And here’s the CSS to work the magic

  1. html, body, #aspnetForm
  2. {
  3.     height:100%;
  4.     /* without this the footer stays at the end of the content
  5.            – not the botom of the viewport */
  6. }
  7. #container
  8. {
  9.     margin:auto;
  10.     min-height:100%;
  11.     width:980px;
  12.     /* #container is at least the height of the veiwport and contains
  13.             everything except the footer*/
  14. }
  15. #contents
  16. {
  17.     padding-bottom:3em;
  18.     /* #contents contains everything excepte the footer and adds padding at least equivalent to the height of the footer beneath the content*/
  19. }
  20. #site-info
  21. {   height:3em;
  22.     margin :-3em auto 0 auto;
  23.     width:980px;
  24.     /* #site-info (the footer) contains the supplimenatry navigation and copyright info.
  25.        It’s height and negative top margin should be the same as the bottom padding in #contents   */
  26. }

This technique was based on Cameron Adams’ “footerStickAlt”.