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 [crayon-60027aceba0d0186677351/]   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 [crayon-60027aceba0dd984711470/] 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" ] [crayon-60027aceba0e0579486354/] 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 … [Read more...]