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 a 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.
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.
<!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 width to the element and set the left and right margin to auto, the browser will center the element on the page.
<!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>
