How to Keep Footer at Bottom of Page – Step by Step Guide
AccuWeb's Free Web Hosting

How to Keep Footer at Bottom of Page – Step by Step Guide

How to Keep Footer at Bottom of Page

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page, leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers often asked to push footers down to the bottom of the page, but it’s not immediately obvious how this can be done.

In this small tutorial I have explain How to Keep Footer at Bottom of Page with the help of CSS.

A diagram describing the footer problem and the ideal solution

When I first ditched tables for pure CSS layouts, I tried to make the footer stay at the bottom, but I couldn’t do it. After a few years of practice, I have finally figured out a neat way to do it. My method uses 100% valid CSS, and it works in all standards compliant browsers.

It also fails gracefully with older browsers, so it’s safe to use on any website.

See it in action: View my demo with the footer at the bottom

The main features

Works in all modern, standards compliant browsers

Compatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8

Fails gracefully on older browsers

Older non-standards compliant browsers position the footer under the content as per normal. We can’t help it if people are using an out of date browser, all we can do is reward people who have upgraded by giving them a better browsing experience through progressive enhancement.

Longer content pushes the footer off the page

On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space.

100% valid CSS with no hacks

The CSS used in this demo is 100% valid and contains no hacks.

No JavaScript

JavaScript is not necessary because it works with pure CSS.

iPhone compatible

This method also works on the iPhone and iPod Touch in the mobile Safari browser.

Free to download

Simply save the source code of my demo page and use it however you like.

There is only one limitation

You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a significant limitation, but this method needs to work correctly.

If you have a lot of text in your footer then it’s also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default.

Another way to solve the same problem is to set the footer’s height in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer, then there’s nothing to worry about – just set your footer height to a pixel value, and away you go.

So how does it work?

It’s actually not that complicated. There are two parts to it – the HTML and the CSS.

The HTML div structure

<div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div>

There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That’s it, all the magic happens in the CSS.

The CSS

html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; }

And one simple CSS rule for IE 6 and IE 5.5:

#container { height:100%; }

The HTML and body tags

The HTML and body tags must be set to height:100%; this allows us to set a percentage height on our container div later. I have also removed the margins and padding on the body tag, so there are no spaces around the page’s parameter.

The container div

The container div has a min-height:100%; this will ensure it stays the screen’s full height even if there is hardly any content.

Many older browsers don’t support the min-height property, there are ways around it with JavaScript and other methods but that is out of scope for this article.

The container div is also set to position: relative; this allows us to absolutely position elements inside it later.

The header div

There is nothing unusual with the header. Make it whatever color and size you like.

The body div

The body is quite normal too. The only important thing is it must have a bottom padding equal to (or slightly larger than) the footer’s height. You can also use a bottom border if you prefer, but a margin won’t work.

The footer div

The footer has a set height in pixels (or ems). The div is absolutely positioned bottom:0; this moves it to the bottom of the container div.

When there is little content on the page, the container div is precisely the browser viewport’s height (because of the min-height:100%;) and the footer sits neatly at the bottom of the screen.

When there is more than a page of content, the container div becomes larger and extends down below the bottom of the viewport – the footer is still positioned at the bottom of the container div, but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.

The IE 6 & IE 5.5 CSS

Older versions of Internet Explorer don’t understand the min-height property, but lucky for us the normal height property behaves the same way in these old Microsoft browsers. It will stretch to 100% height of the viewport, but it will extend even further if the content is longer.

We expose this 100% height rule to Internet Explorer only by using IE conditional comments. View the source on the demo to see how this is done.

So there you have it. A simple, valid way to keep the footer at the bottom of page! I hope you find it useful.

Written by
AsHok Jain
Join the discussion

13 comments
  • When stumbled upon this article I thought it was a sign from the CSS gods, since I’ve been battling with a footer at chefsconsortium.com. Unfortunately this fix wasn’t the godsend I was hoping for. The footer still wants to display right under the content midway on the screen. Thanks anyway.

    • It shouldn’t. Though, just verify your layout; just remind that an absolute positioned element, even though it’s taken out of the document flow, remains “relative” to its closest “relative-positioned” ascendant..
      So, if your footer doesn’t stick down to the bottom of the page, well, it means that somewhere in the hierarchy, one of its containers has a relative positioning and a fixed height, that constraint the footer to be “bound” to the “bottom” of that container…

      • Maybe I don’t understand… your container has relative positioning. And so does mine.

        #container { min-height:100%; position:relative; }

      • Maybe I don’t understand… your container has relative positioning. And so does mine.

        #container { min-height:100%; position:relative; }

      • Maybe I don’t understand… your container has relative positioning. And so does mine.

        #container { min-height:100%; position:relative; }

      • Thanks for your reply Ashok. Unfortunately not for me in FireFox or IE. When you resize the browser and use scroller to view bottom of page, footer scrolls up with rest of content.

          • I have checked the URL and is working fine in all browser (Chrome, Fire Fox, IE ). May be you will be using the old version, please update.

  • Nicely said. Very succinct. How many times has this driven me crazy! I’ve found ways to make it work but not so well across browsers. Thanks!

  • Thanks! This is a pesky problem that I’ve run into many times… I’m going to bookmark this so I won’t have to mess around with troublesome footers in future.
    Cheers,
    Chris

    • “thanks for appreciation Do subscribe to our RSS feed to get daily dose of this kind of articles http://feeds.feedburner.com/Pixel2pixelDesign”

Let’s get social

Web design blog for professionals with topics focusing on useful design techniques, design best practices and design inspiration. Subscribe for updates!

15585

JOIN OUR GROWING LIST OF SUBSCRIBERS!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

15856