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”.

Quick tip for using XHTML Strict with

One thing that has always infuriated me with .net is it’s insistence on adding an invalid name attribute to the form*.

About a month ago I found a nice easy cure for this, so I thought I’d share it. All you need to do to stop .net adding the name attribute to the form is add an xhtmlConformance tag to your web.config like so:

  1. <configuration>
  2. <system.web>
  3. <xhtmlConformance mode=“Strict” />
  4. </system.web>
  5. </configuration>

Hopefully that’ll be of some use to someone.

*What annoys me more is the fact you have to have a form tag on every page for .net to work, but that’s a rant for another day.

Update your Facebook status from Twitter

I reluctantly caved in and joined Facebook a few weeks back. At the time I really couldn’t see the point, after all – I have my blog and twitter for talking at people, Flickr for my photos, for bookmarks and for my music. Why would I need anything else?

For the first couple of weeks I just didn’t get it – I only had three friends on there, two of whom where my sisters, but then I started finding more and more people I knew and I was hooked. This site is what freinds reunited could have been if they’d done it properly.

Facebook allows you to bring in data from other sites using various “applications” that sit within the facebook site. One of the first things I did was add the Twitter app, but was immediately disappointed that this didn’t updat the the facebook status.

Getting to the point:

Fortunately there’s a new version of the official Twitter application on Facebook that directly updates your facebook status from twitter. If you use twitter and facebook go and get this now! If you have already installed the twitter app you just need to click the “Want Twitter to update your Facebook status? Click here!” link, then you may want to go to the Facebook application settings page and stop the twitter updates appearing in the mini feed otherwise you end up with duplicates.

Then you too can be a happy bunny like me.