The Footer goes at the bottom!

By Ikki on May 21, 2008 in Design, Tutorials, Web Development

Hi peeps,

Ever wondered how to place your footer at the bottom of the browser window or at the bottom of the page? Tired of trying hundreds of scripts that work everywhere but on Internet Explorer 6 and lower? I’ll share with you all a simple way to make it work using CSS!

The HTML structure

Let’s say we have a HTML code structured like this:

?Download sticky_footer.zip
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky Footer Tutorial | Rauru.com</title>
</head>
<body>
	<div id="wrapper"> <!-- wrapper -->
		<div id="contents"> <!-- contents -->
			Hello world!
		</div> <!-- end contents -->
	</div> <!-- end wrapper -->
	<div id="footer"> <!-- footer -->
		Rauru.com | All rights reserved.
	</div> <!-- end footer -->
</body>
</html>

A quite simple structure, isn’t it?.

First, we have a “wrapper” that will contain all the contents of our page. We don’t need to talk about it. Next, our beloved footer area which is our subject of study and who we want to stick at the bottom of the browser. OK, we’re all set with the HTML codes so it’s time to apply some CSS magic ;)

Playing with CSS

Let’s take a look at our CSS first:

?View Code CSS
html, body {
    height: 100%;
}
 
#wrapper {
    min-height: 100%;
}
 
/* IE6 Hack */
* html #wrapper {
    height: 100%;
}
 
#footer {
    position: relative;
    height: 40px;
    margin-top: -40px;
}

In the first line, we’re setting our body and html tags height to 100% to make it the same as our web browser’s. Next, we give our wrapper a min-height of 100% to make sure that it’s height will be the same as our browser’s height. Since the min-height property isn’t supported by IE6 and lower, we use a css hack to get the same effect without affecting other browsers ;)

Now, the real trick is here:

?View Code CSS
#footer {
    position: relative;
    height: 40px;
    margin-top: -40px;
}

By using the property position:relative, our footer will be positioned over our content if we change the window’s height. Next, we set a fixed height to our footer and give it a negative top margin value with the same value as our footer’s height to make it “float” over our wrapper. That way, we’ll force our footer to stick at the bottom of our window and always below our content if the latter doesn’t take up the entire browser window.

Here’s a working example ;)

Cheers!

P.S.: as always, if you found this tutorial useful don’t forget to Digg it!

Related Posts:
  • Rounded Corners with CSS
    Hi peeps, Ever wanted to know how to add those nitfy, rounded corners to your designs? Today I'm going to share with you a couple of simple techniques...

Post a Comment

Next Post »
« Previous Post