Centering Footer [Archive] - CodingForums.com

wyclef

05-09-2006, 03:46 PM

Anyone know how I can center this footer without changing the positioning from absolute?

<!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></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter(fid) {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('container').offsetHeight;
var footerElement = document.getElementById(fid);
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
// alert('windowHeight:'+windowHeight+', contentHeight:'+contentHeight+', footerHeight:'+footerHeight);
}
}
}
}
window.onload = function() {
setFooter('footer');
}
window.onresize = function() {
setFooter('footer');
}
</script>

<style type="text/css">
body {
margin: 0; padding: 0;
background: #fff;
font-family: Palatino, Georgia, Times, serif;
color: #333;
}

#banner, #colors, #column_wrap {
width: 800px; height: 76px;
margin: auto;
}

#home #banner, #home #colors, #home #column_wrap {
height: 150px;
}

#container {
width: 800px;
margin: auto;
}

#column_wrap {
padding-top: 52px;
background: #ccc;
}

#footer {
width: 800px;
margin: 0 auto; padding: 25px 0 25px 0;
color: #fff;
text-align: center;
position: absolute;
background: #c00;
}
</style>

</head>

<body id="home">

<div id="container">
<div id="column_wrap">
Content Content
</div>
</div>

<div id="footer">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>

</body>
</html>