HTML5 CSS3 Fixed footer

Hello,

Sometime we want a footer that stays where it is supposed to stay i.e. at the vertical end of the page. We don’t have to worry if user scrolls or not it just stays there.

In the page layout we are left with pretty much standard components or you can say containers namely

  • Header (carries navigations, logos etc)
  • Content (could be subdivided)
  • Footer(carries links that company want you to see regardless which page you are browsing)

With HTML5 we got a special tags namely header and footer

Here is an example footer that uses twitter bootstrap styling

The Markup

 

Before I continue, first thing first.

Because of browsers which don’t know about HTML5 tags or in other words they are not compatible with HTML5 I recommend you making use of this very useful library for rendering your styles correctly.

https://github.com/aFarkas/html5shiv

Download and put html5shiv.js on your pages which enables you to make use of HTML5 sectioning elements for example header, footer, article etc.

Include it like

Once you have done that the styles shall work on likes of browsers such as  IE7, IE8 etc

Now lets do the CSS bit and fix it at the bottom.

The CSS for sticky footer in HTML5 and with CSS3

[geshi lang=”css” nums=”1″ target=”_self” ]

The above CSS is enough to make your footer sticky. It is recommended that you shouldn’t use any margin in vertical styles else you would have to adjust style values accordingly.

You should adjust Footer’s internal container width accordingly to center it.

Here is a demo for what we have done above

The Demo

http://jaspreetchahal.org/examples/css-examples/fixed-border-html5-css3.html

Please note

That other CSS classes used such as row, span2, offset* etc are inherited from twitter bootstrap

I hope this helps you

If you have any questions do leave your comments and someone will try to help you out

Cheers

 

 

Comments

  1. Fixed is like a navbar fixed-tobottom. It looks like sticky footer.

  2. Your sticky footer is crap. I can’t even scroll to see the content. [abuse removed]

    • Thanks for letting me know. I hope that others won’t have same problem. Its working perfectly for me. I never tested on your ancient browser like IE6 -8 so it may not work on those.
      While leaving a comment you should also mention how the code can be improved (if you have any knowledge on a given topic, I think you may have none in this case) rather than just saying something is CRAP and abusing people mentally because you don’t like it is not something a good soul do. Load the Demo link provided on this page on decent browsers and it should work. There are couple of edits made to make sure it works on IE without any fuss.
      Regards
      Jas

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.