Did you find this useful?
Socialize it today.


Pushing a Footer to the Bottom of a Web Page

Wednesday, February 06, 2013

tags CSS

In this tutorial, we are going to cover how to push the footer down to the bottom of your web page. While there are several ways to accomplish this, the approach described in this article is done in simple manner using CSS. This approach will work for Internet Explorer 7 and later as well as the other major browsers such as Chrome, Firefox, Safari, and Opera.


Simple Example

The following lines of CSS are the bare minimum to get a footer to be pushed to the bottom of the page. You can definitely add more styling properties to make your footer more appealing. You may have noticed a negative value set for the margin property that is applied to the element with an id = "wrapper". This value must be the same number that you assign as the height of your footer. It should also include padding, borders or other items that may affect the height of the total height of the footer. If the page you are developing is an ASP.NET (.aspx) page, you need to include the form selector shown on line 2.  For example, html, body, #form1 {height: 100%;}. If you are not developing using ASP.NET, do not include the form selector.  Note: You should also be aware that the use of the universal selector (*) on line 1 is not optimal. It is being used for this simple example, but be aware that this selector could cause unwanted results with other HTML elements that are not included in this example. Using a CSS Reset approach is preferred.


CSS

* {margin:0;}
html, body {height: 100%;}
#wrapper {min-height:100%;margin-bottom:-75px;}
#seperator, #footer {height:75px;}

The HTML structure within the body of the web page is simplified for this example. Using this technique, you should ensure that there is no content outside of the #wrapper and #footer div elements. You should also include no content inside of the "separator" div. The purpose of this div is to ensure that content is not overlapped by the footer.

HTML

<body>
  <div id="wrapper">
     Your cool website content here!
     <div id="separator"></div>
  </div>
  <div id="footer">Footer Area</div>
</body>

Here are the results from the simple example. As you can see, not very impressive. Our footer is actually at the bottom of the page, but the text is not displayed at the very bottom because we assigned a height of 75px to the footer.


simple footer push

Example

In this example, we are going to include a header, content div, and footer. We will add some additional styling so that the page is more appealing to the end user.  The divs will take up the width of the page regardless of the size of the display. Of course, if we want to place logos and other elements within the header and footer, you can do so and apply the appropriate padding to those elements so they space out nicely.


footer pushed down

demo


<!DOCTYPE html>
<html>
<head>
<style>
    html, body {height: 100%;font-size:1.25em;margin: 0;background:#efefef;}
    #wrapper {min-height:100%;margin: 0 auto -75px;}
    #header {background-color:#104ba9;min-width:100%;height:100px;float:left;font-size:1.5em;color:white;}
    #separator, #footer {height:75px;}
    #content {margin:0 auto;padding:15px;}
    #footer {background:#6a93d4;min-width:100%;float:left;}
</style>
</head>
<body>
  <div id="wrapper">
     <div id="header">Amazing Header!</div>
     <div id="content">
        <p>Your cool website content here!</p>
     </div>
     <div id="separator"></div>
  </div>
  <div id="footer">Footer Area</div>
</body>
</html>


Example with Content Centered

In this example, we are using a few techniques to center the content within the header, main div, and footer. The first thing you may notice is that within the header and footer, we have a headerContent and footerContent pair of div elements. These sections will hold the images, text and other elements that you normally find in the header and footer section of a web page. To center those elements on the page, all we need to do is assign a width and margin style. For example... #element {width:940px;margin:0 auto;}. Once you add a width to the element and set the left and right margin to auto, the browser will center the element on the page. Click on the "demo" icon below to see an online version of this example.


header and footer centered, footer pushed down

demo


<!DOCTYPE html>
<html>
<head>
<style>
    html, body {height: 100%;font-size:1.25em;margin: 0;background:#efefef;}
    #wrapper {min-height:100%;margin: 0 auto -75px;}
    #header {background-color:#104ba9;min-width:100%;height:100px;float:left}
    #headerContent {width:940px;margin:0 auto;padding:15px;font-size:1.5em;color:white;}
    #separator, #footer {height:75px;}
    #content {margin:0 auto;width:940px;padding:15px;}
    #footer {background:#6a93d4;min-width:100%;float:left}
    #footerContent {margin: 0 auto;width:940px;padding:15px;}
</style>
</head>
<body>
  <div id="wrapper">
     <div id="header">
         <div id="headerContent">Amazing Header!</div>
     </div>
     <div id="content">
        <p>Your cool website content here!</p>
     </div>
     <div id="separator"></div>
  </div>
  <div id="footer">
      <div id="footerContent">Footer Area</div>
  </div>
</body>
</html>

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS and JavaScript Editor HTML CSS: The Complete Reference