Javascript Footer Glitch

programming web dev
1

Anyone have an idea why the footer pops up to the top of the browser when the browser width shrinks?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
		<style tyle="text/css">
#header { margin: 0; padding: 0; }
h1 {
	width: 320px; height: 140px;
	margin: 0; padding: 0;
	border-left: 4px solid #000;
}
h2 { font-weight: normal; }
h3, h4 { margin: 0 0 0 17px; padding: 0 0 0 9px; font-size: 11px; }
h5 { margin: 0; padding: 17px 0 0 0; font-size: 26px; }
h6 { margin: 0; padding: 5px 0; line-height: 18px; }
#content p {
	margin: 0; padding: 5px 0;
	font-size: 14px;
	font-family: serif;
	line-height: 18px;
}
#leftcontent {
	position: absolute;
	margin-right: 300px;
}
#rightcontent {
	margin: 0; padding: 0 25px 0 0; 
	top: 0; right: 0; 
	width: 250px; 
	position: absolute;
}
#content { margin: 0; padding: 40px 0; }
#info {
	margin: 0; padding: 0 0 0 17px;
	border-left: 4px solid #000;
}
#date {
	font-size: 10px; 
	margin: 0 0 164px 0; padding: 17px; 
	height: 35px;
	border-left: 4px solid #000;
}
#side-info {
	font-size: 11px; 
	height: 315px;
	line-height: 14px;
	margin: 0; padding: 5px 17px;
	border-left: 4px solid #000;
}
a { text-decoration: none; font-weight: bold; }
#footer {
	font-size: 10px; width: 85%;
	margin: 0; padding: 10px 17px;
	border-left: 4px solid #000;
}
</style>

		<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() {
	if (document.getElementById) {
		var windowHeight = getWindowHeight();
		if (windowHeight > 0) {
			var contentHeight = document.getElementById('leftcontent').offsetHeight;
			var footerElement = document.getElementById('footer');
			var footerHeight  = footerElement.offsetHeight;
			if (windowHeight - (contentHeight + footerHeight) >= 0) {
				footerElement.style.position = 'absolute';
				footerElement.style.top = (windowHeight - footerHeight) + 'px';
			}
			else {
				footerElement.style.position = 'static';
			}
		}
	}
}
window.onload = function() {
	setFooter();
}
window.onresize = function() {
	setFooter();
}
//-->
</script>

	</head>

	<body id="home">

		<!-- Start Left Content -->
		<div id="leftcontent">

			<!-- Start Header -->
			<div id="header"><h1>Header 1</h1></div>
			<!-- End Header -->

			<!-- Start Content -->
			<div id="content">
				<div id="info">
					<h5>page title</h5>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>
					<p>The text contains The text contains The text contains The text contains The text contains The text contains The text contains</p>					
				</div>
			</div>
			<!-- End Content -->

		</div>
		<!-- End Left Content -->

		<!-- Start Right Content -->
		<div id="rightcontent">
			<div id="side-info">Side</div>
		</div>
		<!-- End Right Content -->

		<!-- Start Footer -->
		<div id="footer">
			<p>&#169; Footer Text Footer Text Footer Text Footer Text Footer Text Footer Text Footer Text Footer Text </p>
			<p>How do i get this line to float right aligned with sidebar</p>
		</div>
		<!-- End Footer -->

  	</body>
</html>