Ad goes here

Thursday, 29 November 2012

CSS Fixed/ Footer

We all developers/designers are tried to use fixed footer for our website/application and most of them got content overlapping problem. But today I will give you some tips, where you can simply use fixed footer with a few lines of CSS and surly it will work on all leading browsers.

How it will work on browsers:
The footer always will be visible at the end of the browser even you use a single line of content or view it on any resolution. You never face content overlapping issue on maximum page content.

Add following css to your stylesheet.

* {
margin: 0;
html, body {
height: 100%;
.main-content-area {
min-height: 100%;
height: auto !important;
height: 100%;
form {height:100%} /* for ASP.NET project only */
.footer, .fixedfooter {
height: 120px;
.footer { height:120px;}

CSS Note: Please use equal height for .footer and .fixedfooter class.



<link rel="stylesheet" type=”text/css” href="yourstylesheet.css" />



<div class=" main-content-area ">

Website Content

<div class=" fixedfooter "></div> <! - - Blank fixed footer area -- >

</div> <!-- main-content-area end here --> 

<div class="footer"> <!—footer will be in separate area -- >

Footer Content



HTML Note: Content area and footer area will be in separate div and the fixedfooter div will be place just before the end of the main-content-area div.


  1. When utilizing the Java Script or CSS3 alongside HTML5, Web Developers can without much of a stretch work with the Geolocation APIs, Application Storage, Canvas, Web Sockets and so forth.javascript query string

  2. I just thought it may be an idea to post incase anyone else was having problems researching but I am a little unsure if I am allowed to put names and addresses on here.