I am trying to create a basic liquid layout which features one fixed-width column next to a liquid one. Another objective is to make sure that the body content of the page appears at the very top of the code.

To acheive this I have absolutley postioned the header and moved it to the bottom of the code, whislt reverse-floating the left-hand nav bar and main content columns so that I get a footer that will move depending on the height of the above divs.

Here is the code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Structure Example </title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
}
#header {
	background-color: #FF9999;
	text-align: center;
	vertical-align: middle;
	height: 60px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	padding-top: 40px;
}
#container {
	width: 100%;
	margin-top: 100px;
	min-width: 778px;
}
#navcolumn {
	background-color: #CCFF99;
	float: left;
	width: 20%;
	height: 300px;
	text-align: center;
	padding-top: 200px;
}
#contentcolumn {
	float: right;
	height: 460px;
	width: 80%;
	background-color: #99CCFF;
	padding-top: 20px;
	padding-bottom: 20px;
}
#footer {
	float: left;
	height: 40px;
	width: 100%;
	background-color: #FFFF99;
	text-align: center;
	padding-top: 20px;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="contentcolumn">This content appears first in the page HTML because it is floated to the right whilst the left-hand navigation bar is floated left.</div>
<div id="navcolumn">NAVIGATION BAR</div>
<div id="footer">FOOTER</div>
</div>
<div id="header">HEADER</div>
</body>
</html>
The div #navcolumn is currently set to 20% width. This in fact needs to be fixed whilst #contentcolumn remains liquid.

I'd appreciate your help. Thanks.