<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="generator" content="
HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type" content="
text/html; charset=us-ascii" />
<title>Footer Test</title>
<style type="text/css">
/*<![CDATA[*/
html, body, #wrapper {
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
browsers*/
margin: 0;
padding: 0;
}
html>body, html>body #wrapper {
height: auto; /*this undoes the IE hack, hiding it
from IE using the child selector*/
}
#wrapper {
position: absolute;
top: 0;
left: 0;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
#main {
margin-bottom: 3em; /*Modify value as needed for
footer height.*/
height: auto;
padding: .5em;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>Put your whole page here, everything except the footer.</p>
</div><!-- end main -->
<div id="footer">
<p>Put your footer stuff here.</p>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
