Forum Moderators: not2easy
After looking at many fine examples of footer code from many different authors and playing around with it a little on my own, I have come up with what I consider to be a pretty versatile solution. It may not be the lightest possible way to do it, but it offers options for use in different page layouts with a little imagination.
I post this here so maybe those searching for somthing like this will be able to find this example easily, and so others can fine-tune my code even better. So, without further delay:
A Footer That Will Stay at the Bottom of the Page
(Works in IE6 quirks and compliant modes, and NN7.1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Footer Demo</title>
<style type="text/css">
html, body
{
HEIGHT: 100%;
WIDTH: 100%;
MARGIN: 0px;
PADDING: 0px;
FONT-FAMILY: Arial, sans-serif;
}
#Contents
{
POSITION: absolute;
TOP: 0;
LEFT: 0;
MIN-HEIGHT: 100%;
WIDTH: 100%; /* Optional - Depending on your layout */
}
* html body #Contents
{
HEIGHT: 100%; /* Only IE sees this */
}
#Main
{
MARGIN-BOTTOM: 3.5em; /* Set this to the height of the footer */
BACKGROUND-COLOR: red;
COLOR: #fff;
PADDING: 0px;
}
#Footer
{
BACKGROUND-COLOR: #00f;
COLOR: #fff;
POSITION: absolute;
BOTTOM: 0px;
WIDTH: 100%;
TEXT-ALIGN: center;
}
</style>
</head><body>
<div id="Contents">
<div id="Main">
<!-- Begin Arbitrary Content -->
<div style="HEIGHT: 12em; TEXT-ALIGN: center;">
<br /><br />
I am the content that lives in the Main Section.<br />
I am the content that lives in the Main Section.<br />
I am the content that lives in the Main Section.<br />
I am the content that lives in the Main Section.<br />
I am the content that lives in the Main Section.<br />
I am the content that lives in the Main Section.<br />
</div>
<!-- End Arbitrary Content -->
</div>
<div id="Footer">
<div>I am the content that lives in the Footer Section.</div>
<div>I am the content that lives in the Footer Section.</div>
<div>I am the content that lives in the Footer Section.</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title of the Page</title>
<style type="text/css"> body, html {
margin: 0;
padding:0;
border: 0;
width:100%;
height:100%;
}
.container{
position:relative;
height:100%;
width:100%; }
.footer{
position: relative;
width:100%;
text-align-center;
float: left;
margin: 0;
border: 0;
padding:0;
}
</head>
<body>
<div class="container">
Everything else but the footer goes here
</div>
<div class="footer">
Footer content
</div>
</body>
</html>
I've used that method myself and it works OK, perhaps I've over simplified and missed something out, I'll take a look at the code and repost tomorrow, unless of course one of the real experts corrects me first.
What version of NN are you using?
This is the exact code I used, try a cut and paste and see what you get.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{
margin: 0;
padding:0;
border: 0;
width:100%;
height:100%;
}
.container{
position:relative;
background-color: red;
font: normal 1.75em/2em Verdana, Helvetica, sans-serif;
color: #FFF;
height:100%;
width:100%; }
.footer{
position: relative;
top: -20px;
background-color: green;
font: normal 1em/1.25em Verdana, Helvetica, sans-serif;
color: #FFF;
width:100%;
text-align-center;
float: left;
margin: 0;
border: 0;
padding:0;
}
</style>
</head>
<body>
<div class="container">
Everything else but the footer goes here
</div>
<div class="footer">
Footer content Footer content Footer content Footer content
</div>
</body>
</html>
Replace your content <div> with this so you have longer content:
<div class="container">
Everything else but the footer goes here<br />
Everything else but the footer goes here<br />
Everything else but the footer goes here<br />
Everything else but the footer goes here<br />
</div>
With just one line of content you're not seeing the footer collapse, you're seeing the browser collapse.
And for what it's worth, my original posting wasn't asking a question. It was offering a solution. I understand my solution isn't the only solution, and likely isn't the best solution. But it is a good solution none the less.
If you want the footer to be tagged on the bottom of the content whatever size then you can remove the {height:100%;} from the container div and the {top:-20px;} from the footer.
That will give you a page as big as your content, and if you have only a small amount of content on some pages your footer will be too high. You can adjust the page height by adding a spacer div inside the container div.
In the CSS style section
.spacer{
clear: both;
padding: 20px 0;
}
In the html
<div class="spacer"> </div>
