HI,
With that structure you'd need to use the absolute footer technique which is a little unreliable in old IE in dynamic situations but these days is less of an issue.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p{margin:0 0 1em}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#page:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
margin:0;
padding:0;
}
#page {
width:760px;/* or whatever it needs to be */
background:#ffffcc;
margin:auto;
min-height:100%;
text-align:left;
clear:both;
position:relative;
}
* html #page { height:100% }
#contentwrapper { padding-bottom:40px;/* protect absolute footer */ }
#footerwrapper {/* footer now sits at bottom of window*/
position:absolute;
bottom:0;
left:0;
background:red;
width:760px;/* whatever the parent is */
margin:auto;
height:40px;/* must have a fixed height and matches the height of the padding on bottom of contentwrapper */
clear:both;
}
</style>
</head>
<body>
<div id="page">
<div id="headerwrap"></div>
<div id="contentwrapper">
<div id="page-content">
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test last</p>
</div>
</div>
<div id="footerwrapper"></div>
</div>
</body>
</html>
A sticky footer only works with a fixed height footer (although you can use ems if necessary.)
Reply With Quote
Originally Posted by qwaerstd
Bookmarks