The mark-up


<!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>Header, 2-cols, sticky footer to right col</title>
<style type="text/css">
html {height: 100%;}

body {
margin:0; padding:0; 
height:100%;
color: #003;
background: #fff url("pics/ocean_200.gif") repeat-y;
}

#wrapper {
position: relative;
margin: 0 0 -3em 0; 
min-height: 100%;
}

* html #wrapper {height: 100%;}

#header {height: 150px;}

#header img {
display: block;
width: 100%;
}

#nav {
float: left;
width: 200px;
color: #003;
background: transparent;
margin: 0;
padding: 20px 0 4em 0;
}

#nav li {
font-size: .85em;
padding: 5px 0 0 30px;
margin: 0;
}

#content {
margin:  0 0 0 200px;
padding: 0 0 3em 0;
color: #003;
background: #fff;
}

#content  p {padding: .3em .3em .3em 20px;}

#footer {
position: relative;
font-size: .85em;
height: 2em;
margin: 0 20px 0 220px;
padding: 0;
color: #003;
background: #fff;
border-top: 1px solid #333;
}

#footer p {
font-family: cursive;
margin: 0 1em 0 0;
padding: 0;
text-align: right;
}

</style>
</head>
<body>

<div id="wrapper">

<div id="header">
<img src="pics/coogee_surf.png" alt="" height="150">

<ul id="nav">
<li>List item</li>
...
</ul>

<div id="content">

<h1>The markup</h1>

<p>Here is placed the markup of the whole page.</p>
<p>Of course, you would have your own content.</p>
</div>

</div> <!-- this ends the wrapper -->

<div id="footer">
<p>design by Graphica-Europa</p>
</div>

</body>
</html>