Zymic

Webmaster resources

Follow us on Twitter!

Hosting status updates - Click here

CSS & HTML

Free Tutorials » CSS & HTML » Effective Footers

Code a footer which sticks to the bottom of the page except when content pushes it down.

Step 1

Having the right footer is important in a website, it can be a large part of the look of the page. In this tutorial we will be covering how to make a fixed-height footer, which sticks to the bottom of the page except when content pushes it down using purely HTML and CSS. You can see an example of this here. This is not entirely trivial because position: absolute; or fixed; would not move down when the page was filled with content, and merely placing it at the bottom of the markup would not ensure it was at the bottom of the page when there was not much content. The solution to the problem is that we make everything but the footer altogether have a minimum height of 100%, then we use a negative top margin on the footer equal to its total height to bring it up, placing the bottom of the footer at the bottom of the page when the content doesn't have a height larger than 100%, perfect! The HTML required for this is fairly simple, something like this will suffice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Footer Example</title>
</head>
<body>
   <!-- Container Divs -->
   <div id="container"><div id="padding">
      <!-- Header -->
      <h1>Header</h1>
 
      <!-- Content -->
      <h2>Example Content</h2>
      <p>
         Some content...
      </p>
   </div></div>
 
   <!-- Footer -->
   <p id="footer">
      Page Footer
   </p>
</body>
</html>

You can view what this code (with some basic styling to make things clearer) look like here.

Step 2

Now we can start styling the document to get the footer how we want it. First of all, we need to make the container div have a min-height of 100%, this can be achieved in most browsers with the following CSS:

html, body
{
   height: 100%;
   margin: 0;
   padding: 0;
}
div#container
{
   min-height: 100%;
}

Both html and body need to be set to 100% height so that the container div can take up the space. This does the job in a lot of browsers, but unfortunately IE doesn't understand min-height, for some reason IE's height is equivalent to min-height and min-height does not exist, so to combat this we need to set height: 100%; in IE without affecting compliant browsers. We can achieve this using !important in the CSS like so:

div#container
{
   height: auto !important;
   height: 100%;
   min-height: 100%;
}

The !important makes compliant browsers use height: auto; instead of height: 100%; while IE uses height: 100%; instead, fixing it nicely. Our layout now looks like this, almost done!

Step 3

Now that our main content area is formatted correctly we can turn our attention to the footer. At the moment it is just below the main content, so we need to apply our negative top margin to pull it up into the correct position. To do this, first we need to calculate its total height, in this case we have made the footer 17px in height, with an additional 9px padding at the top, and another 9px at the bottom. Therefore, the total height of the footer is 17+9+9 = 35px. So we need to move the footer 35 pixels up, which is done with this line:

p#footer
{
   margin: -35px 0 0 0;
   /* ... other styles ... */
}

This makes the top margin negative 35 and sets left, right and bottom to 0. Now, this is now perfect when there is little content, but when more is introduced to the page we see a problem emerge, the content overflows onto the footer which is hardly something we want. We fix this using the "padding" div that was introduced in the HTML at the beginning, we can't use padding on the container div, because that would make the height of the container div 100%+padding, and would push the footer below the bottom of the page again, so instead we have to pad another container inside the first, in this case the "padding" div. The fix is very simple, and is simply this:

div#padding { padding: 0 0 45px 0; }

Once this is in place, content no longer overflows onto the footer when there's a lot of it, and when there is little the page is unaffected.

Step 4

That's pretty much that on making footers like this, it's a useful tool and widely compatible, this method has been tested on:

  • IE 5
  • IE 5.5
  • IE 6
  • IE 7
  • Firefox 2
  • Opera 9
  • Konqueror 3.5.7
  • Safari 2.0.4
NOTE: IE5 and 5.5 don't play well with the dynamic example at the top of the page, but are fine with static pages.

Tutorial comments

22.07.2014 -

Sameershokat says …

Hi there;!
actually i am new member and i just join that forum now so i have no any idea about there you asking question so i am also interested something about know that and i hope there are all guy,s helped me & increased my knowledge well so i am waiting here buddies for your exciting comments .....!

05.05.2014 -

teamns says …

Shame about the spammers in this post

13.04.2014 -

polo2014 says …

http://www.coach-storeoutletonline.com/ Coach Black Friday 2013
http://www.coachcoachoutlet.com/ Coach Cyber Monday
http://www.coachxfactory.com/ Coach Factory
http://www.coach-factoryoutletonline.net/ Coach Outlet Factory
http://www.coach-outletusa.com/ Coach Outlet USA
http://www.coach-pursesfactory.com/ Coach Purses Factory
http://www.coachpurseusa.com/ Coach Purses USA
http://www.coach-storeoutlet.com/ Coach Store Outlet
http://www.coachxpursesonsale.com/ Coach Purses On Sale
http://www.discountbeatsbydresale.com/ Monster Beats Outlet
http://www.louis-vuittonblackfriday.com/ Louis Vuitton Outlet
http://www.lv-guccishoesfactory.com/ Louis Vuitton Factory
http://www.marcjacobsonsale.com/ Marc Jacobs On Sale
http://www.mcmblackfriday.com/ MCM Outlet
http://www.mcmoutlet-jp.com/ MCM 店铺
http://www.michaelkorsmas.com/ Michael Kors Outlet
http://www.michaelkors.so/ Michael Kors Outlet
http://www.michaelkorsfactory-store.com/ Michael Kors Factory
http://www.michaelkorsoutletr.com/ Michael Kors Outlet
http://www.michael-korsfactoryonline.com/ Michael Kors Factory Online
http://www.newcoachfactory.com/ Coach Factory Outlet
http://www.north-faceoutletonlines.net/ North Face Outlet Online
http://www.polo-outletstore.com/ Polo Outlet Store
http://www.ralphlaurenuker.com/ Ralph Lauren UK
http://www.saclongchamppairs.com/ Sac Longchamp Pairs
http://www.tcoachoutletonline.com/ Coach Outlet Online
http://www.the-coachfactoryoutlet.com/ Coach Factory Oultet
http://www.uggaustralia.cc/ Ugg Australia
http://www.barbour-jacketsoutlet.com/ Barbour Jackets Outlet Online
http://www.canada-gooser.com/ Canada Goose Outlet
http://www.guccishoes-factorys.net/ Gucci Outlet Online
http://www.michaelkors-states.com/ Michael Kors Outlet
http://www.moncler-clearance.com/ Moncler Clearance
http://www.moncler-jacketsoutletonline.com/ Moncler Jackets Outlet Online
http://www.northsclearance.com/ North Clearace Outlet
http://www.ralph-pololaurens.com/ Polo Ralph Lauren Outlet Online
http://www.woolrich-clearance.com/ Woolrich Clearance
http://www.cvshopfactory.com/ shop.coachfactory.com
http://www.mksfactoryoutlet.com/ Michael Kors Factory Outlet
http://www.zxcoachoutlet.com/ Coach Outlet Online USA
http://www.mischristmas.com/ Coach Factory Outlet Online
http://www.misblackfriday.com/ Black Friday
http://www.thebeatsbydre.com/ Beats by Dre
http://www.newoutletonlinemall.com/ Coach Purses Outlet Online
http://www.clickmichaelkors.com/ Michael Kors USA
http://www.cmichaelkorsoutlet.com/ Michael Kors Outlet USA

10.04.2014 -

cheapbagsbay says …

HTTP:// www.cheapbagsbay.com
We are a professional company which supplies the excellent products series,
including bags,hats, sunglasses, bikinis, t-shirts, belts and jeans.


Top quality , Low price, Excellent service
1)Only sell high quality products series.
2)Wholesale price------ accept PAYPAL,CC, western union, Bank wire.
3)Free shipping :safe & fast, , and just only need 5-7 business days
to delivery.
4)Trustworthy business, small or large order are welcome
www.cheapbagsbay.com
www.cheapbagsbay.com
www.cheapbagsbay.com

Please contact us for more details, we will do our best for you then.
1)Gtalk: cheapbagsbay@gmail.com



Website: www.cheapbagsbay.com

04.03.2014 -

sarah646 says …

Shit I'm not getting this code. So,please help me out......

View all user comments for this tutorial.

Tutorial statistics

Date added:
25.08.2007
Author:
Alex Elliott
User rating:
4/5
Rate tutorial:
Total views:
91321
Total comments:
457

Advertisements