Hey paul, I have been working with one of your layouts trying to get a special effect but i can't seem to get it to work?

Here is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html, body {height:100%}
body {margin: 0;padding: 0;font: x-small arial, hevetica, sans-serif; text-align: center;}
html>body #container {height:auto;}
#container {margin: 0 auto;width: 100%; height:99.8%; min-height:100%; text-align: left; background-color: #cccccc;position:relative;}
html>#container {height:auto;}
#headercontain {height: 122px; width:100%; background-color:#cccccc; border-top:1px solid #444444; margin:0; position:relative; z-index:2;}
#header {height: 122px; width:785px; background-color: #ffffff; margin:0 auto; padding:0; position:relative; text-align:center; border:1px solid white;}
#logo {width: 785px; height: 122px; margin:0px; padding:0px;}
#LogoImage {background: transparent url(../images/Sonalyst.jpg) no-repeat left top; position:absolute; left:0; top:0; display:block; height:122px; width:785px;}


#mainnav {width:100%; background-color: #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; position:relative; z-index:2;}
#navigation {width:786px; margin: 0 auto;}
#navigation p {display:none}
#nav, #nav ul {padding:0; margin:0; list-style:none; text-align:center;}
#nav a {display:block; width:194px; color: #ffffff;}
#nav a:hover {background-color: #555555;}
#nav li {float: left; width:194px; background-color: #333333; border:1px solid #ffffff;}
#nav li ul {position: absolute; width: 10em; left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
#clearnav {height:0px; width:100%; clear:both}


#sidebar {float: right; width: 170px; padding:5px 0 ;}

#content {width: 785px; padding:5px 0 10px; background-color:#ffffff; margin: 0 auto;}
#content p, #sidebar p, #mainnav p, #header p,#footer p {margin:0 5px 5px 5px}
#footer {position:absolute; bottom:0; width:100%; background-color: #ffffff;}
#clearfooter {height:1px;width:100%;clear:both}
#copyright {margin: auto; position:relative; bottom:0; width:786px; background-color: #41647F; text-align:center; color:#ffffff;}
</style>
</head>
<body>
<div id="container">
<div id="headercontain">
<div id="header"><h1><a href="index.asp" id="LogoText">Sonalyst</a><br />Network and Security Analyst<a href="index.asp" title="Sonalyst: Security and Network Analyst" id="LogoImage"></a></h1></div>
</div>
<div id="mainnav">
<div id="navigation"><p>Navigation/p>
<ul id="nav">
<li><a href="Services.asp">SERVICES</a>
<ul>
<li><a href="Professional.asp">Professional Services</a></li>
<li><a href="NetAssess.asp">Network Assessment Services</a></li>
<li><a href="VoIP.asp">VoIP Services</a></li>
<li><a href="Security.asp">Security Services</a></li>
<li><a href="SAN.asp">SAN Services</a></li>
</ul>
</li>
<li><a href="Contact.asp">CONTACT US</a></li>
<li><a href="News.asp">NEWS</a></li>
<li><a href="ChannelPart.asp">CHANNEL PARTNERS</a></li>
</ul>
</div>
<div id="clearnav"></div>
</div>
<div id="content">
<p>Footer stays at the bottom of the window unless the content is longer then
it stays at the bottom of the document.</p>
<p>Footer stays at the bottom of the window unless the content is longer then
it stays at the bottom of the document.</p>
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
<div id="footer">
<div id="copyright">Copyright 2004 Sonalyst</div>
</div>
</div>
</body>
</html>

The big problem is i want the bounding box around the content to strech all the way down to the footer.

Can this be done? Am i missing something?

Thanks for all your help.