Thanks for that Paul. But the footer still comes up all the way to the nav
Either you have done it wrong or you asking for something different. The footer will stay at the bottom of the window or at the bottom of the document if the content is higher than the viewport.
If you close the window upwards then the footer will stick to the bottom of the window but will stop as soon as it meets some content.
You have not updated your page so I can't see what you think is wrong.
I have given you the best method already and applied it to your code so all you had to do was copy and paste 
.
Here it is a gain with some more content inside #main to show that it works.
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">
<!--
/* -------------------- Resets --------------------- */
* {
margin: 0;
padding: 0;
}
fieldset, table {
border: none;
}
/* --------------- Document Defaults -------------- */
html {
font-size: 100.01%;
height: 100%;
}
body {
margin: 0 auto;
height: 100%;
font-size: 62.5%;
font-family: Tahoma, Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;
background-color: #666666;
color: #333;
}
/* ------------------ Typography ------------------- */
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, li {
font-size: 1.2em;
}
/* -------------------- Forms ---------------------- */
input, label {
vertical-align: middle;
}
label {
cursor: pointer;
}
input, select, textarea {
font-size: 1.2em;
font-family: inherit;
font-size: inherit;
}
input, textarea {
padding: .2em;
}
/* -------------------- Tables --------------------- */
table {
table-layout: fixed;
word-wrap: break-word;
overflow: hidden;
}
/* ------------------- Template -------------------- */
#wrapper {
position: relative;
margin: 0 auto;
width: 720px;
min-height: 100%;
background-color: #CCCCCC;
margin-top:-71px;/* space for footer*/
}
* html #wrapper{height:100%}
#header {
height: 120px;
border-top:71px solid #ccc;/* preserve footer*/
}
#nav {
height: 15px;
background-color: #666666;
border-top: 1px solid #0FC;
border-bottom: 1px solid #0FC;
text-align: center;
}
#main {
}
#left {
}
#right {
}
#footer {
height: 70px;
width: 720px;
border-top: 1px solid #666;
text-align: center;
margin:auto;
background:#ccc;
}
/* ------------------- Links ---------------------- */
a {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:active, a:focus, a:hover {
text-decoration: none;
}
a img {
border: none;
}
/* --------------------- Menus ---------------------- */
/* Main Menu */
ul#nav {
}
#nav li {
display: inline;
color: #000;
font-weight: bold;
margin: 0 40px;
}
#nav li a {
text-decoration: none;
color: #000;
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
color: #0FC;
}
/* Footer Menu */
#footer ul {
margin-top: 20px;
}
#footer li {
display: inline;
margin: 0;
font-size: 10px;
}
#footer li a {
text-decoration: none;
color: #333;
}
#footer li a:active, #footer li a:focus, #footer li a:hover {
color: #0FC;
}
/* ---------------- Global Classes ----------------- */
.center {
text-align: center;
}
.clear {
clear: both;
padding: 0;
margin: 0;
line-height: normal;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.hidden {
display: none;
visibility: hidden;
}
.inline {
display: inline;
}
.small {
font-size: 10px;
font-weight: normal;
}
.large {
font-size: 20px;
font-weight: bold;
}
/* ----------------- Content/Pages ----------------- */
#copyright {
font-size: 10px;
color: #333;
margin-top: 1px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="main">
<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>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">HOME</a> | </li>
<li><a href="#">ABOUT</a> | </li>
<li><a href="#">PORTFOLIO</a> | </li>
<li><a href="#">CONTACT</a></li>
</ul>
<p id="copyright">Copyright © 2006 - 2007 DiscountSiteDesign.com All Rights Reserved</p>
</div>
</body>
</html>
The method used above neater than the one that Dave is using (which is my old method anyway) because it doesn't need a clearfooter as that has been applied more neatly to the header element.
Hope that makes sense
Bookmarks