HowTo: Align a footer to the bottom of the page in XHTML Strict across all three browsers!
This is a bit tricky to get to work across all three major browsers (internet explorer, firefox, and safari) while following XHTML Strict (this will still work in HTML4 strict as well.).
Most people can get the footer to go to the bottom of the window, however when the content forces the page to scroll but the footer still stays at the bottom of the window, and not the bottom of the page.
You can see the working example here:
http://www.twenty08.com/labs/bottomalign/index.html
You can continue reading, or just check out the source and go from there.
For starters, you need three elements: A wrapper element, a content element, and a footer element. For purposes of this HowTo, the wrapper element will be called “parent” the content element will be called “content” (clever huh?) and the footer element will be called “footer”.
The basic structure should be as follows:
[...]
<body>
<div class="parent">
<div class="content"> </div>
<div class="footer"> </div>
</div>
</body>
[...]
The rest of this is done via CSS. You’re going to need a main stylesheet file, we’ll call ours style.css and then an IE stylesheet file, which we’ll call ie.css.
Everything below takes place in the main.css stylesheet, until I say otherwise:
You need to define your body height as 100% height otherwise you’re going to run into a few issues, so:
body {
margin: 0px;
height: 100%;
font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
}
Next you need to set up the parent class. The min-height is for Safari and Firefox to force the div height to 100%, while still expanding. We’ll address IE later. Next you want to position this absolutely on the page at 0,0 and go the full page. You’re essentially creating a clone of the body element right now. Here is some sample code below:
.parent {
display: block;
min-height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
Next you’re going to setup the content class, this is the easiest element you’re going to setup. You want to define the bottom padding of the element with at least the same height as the footer is going to be, this prevents the footer from laying on top of your text.
.content {
padding-bottom: 50px;
}
Lastly we need to define the footer class. You need to absolutely position this to the bottom of the parent element, so for this you’ll do bottom: 0px and left: 0px. You need to set the height of the footer to whatever you need it to be, remember, this number should not be greater than the number you defined for the content bottom padding or the footer will overlay your text. The last required thing is to set the z-index to some high number so nothing from content gets above it.
.footer {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
display: block;
height: 45px;
z-index: 999;
padding: 0px;
margin: 0px;
}
This is pretty much it as far as style.css goes. The only thing you need to do in ie.css is the following:
.parent {
height: 100%;
}
IE doesn’t support min-height like Safari and FireFox do, but using height inplace of min-height in IE, has similar results.
You’re going to want to include the two files in the
section of your website as shown below:
<style type="text/css" media="all">
@import "./style.css";
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import "./ie.css";
</style>
<![endif]-->
This will import style.css on all browsers, and only import the ie.css file on IE browsers.
Thats pretty much it, see the example below to for a full reference on how this is done:
Align footer to bottom of page in XHTML Strict with 100% Height
Hope this helps anyone who’s having trouble doing it!
Update: Forgot to include IE7 support. Only change neccessary is changing the conditional comment statement from “if IE” to “if lte IE6″ and it will work fine.
I’m having troubles getting this to work in IE7, did you not apply the IE RULE/HACK to your example?