Hi,
You just need to lose the margin-right and left on the container and replace it with auto. You also need the min-height:100% on the container also.
Here is the layout with some other things adjusted as weell so that it works together.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xht...ansitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<style type="text/css">
* {margin:0;padding:0}
h1,h2,h3,p{margin-bottom:1em}
/* commented backslash hack v2\*/
html, body {
height:100%;
}
/* end hide */
body {
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:76%;
}
#container {
height:100%;
min-height:100%;
min-width:900px;
width:900px;
margin-left:auto;
margin-right:auto;
margin-bottom:-52px;
text-align:left;
border: thin solid #0050a0;
position:relative;
}
html>body #container {
height:auto;
}
#header {
background: url(/background.jpg) repeat-x;
color: #FFCC66;
height: 60px;
vertical-align:top;
font: 18px Arial, Helvetica, sans-serif;
padding-left:10px;
font-weight:bold;
}
#header p {
float:left;
clear:right;
}
* html #header {
height: 60px;
}
#rightheader {
background: url(/homepage_header.jpg) no-repeat;
float:right;
height: 60px;
width: 325px;
text-align:right;
color: #FFF;
font-weight: bolder;
}
#rightheader p {
margin: 0;
padding-right: 5px;
text-align:right;
}
#column1 {
position: relative;
width: 290px;
float:left;
margin-top:5px;
margin-right:5px;
}
#column2 {
position: relative;
margin-left:5px;
width:290px;
float:left;
margin-top:5px;
margin-right:5px;
margin-left:5px;
}
#column3 {
position: relative;
width:290px;
float:right;
margin-left:5px;
margin-top:5px;
}
* html #column1 {
padding-bottom:62px;
margin-right:5px
}
* html #column2 {
margin-left:5px;
}
* html #column3 {
margin-left:5px;
left:4px;
}
#footer {
position:absolute;
left:0;
bottom:0;
width:100%;
clear:both;
height:60px;
border-top:thin solid #0050a0;
border-bottom:thin solid #0050a0;
}
* html #footer {
\height:62px;
he\ight:60px;
}
#clearfooter {
clear:both;
height:60px;
}
.contentowner {
font-family:Arial, helvetica, sans-serif;
font-size:12px;
text-align:left;
float:left;
line-height:normal;
}
.declouter {
font-family:Arial, helvetica, sans-serif;
font-size:12px;
text-align:right;
float:right;
}
.declinner {
font-family:Arial, helvetica, sans-serif;
font-size:12px;
text-align:left;
float:left;
}
h1.bluebarheading {
color:#FFCC66;
background:#0050A0;
text-align:left;
width:100%;
font-size:2.0em;
padding-left:3px;
}
h2.bluebarheading {
color:#FFCC66;
background:#0050A0;
text-align:left;
width:100%;
font-size:1.7em;
padding-left:3px;
}
h3.bluebarheading {
color:#FFCC66;
background:#0050A0;
text-align:left;
width:100%;
font-size:1.4em;
padding-left:3px;
}
h4.bluebarheading {
color:#FFCC66;
background:#0050A0;
text-align:left;
width:100%;
font-size:1.1em;
padding-left:3px;
}
h5.bluebarheading {
color:#FFCC66;
background:#0050A0;
text-align:left;
width:100%;
font-size:0.8em;
padding-left:3px;
}
h1.goldbarheading {
color:#0050A0;
background:#FFCC66;
text-align:left;
width:100%;
font-size:2.0em;
padding-left:3px;
}
h2.goldbarheading {
color:#0050A0;
background:#FFCC66;
text-align:left;
width:100%;
font-size:1.7em;
padding-left:3px;
}
h3.goldbarheading {
color:#0050A0;
background:#FFCC66;
text-align:left;
width:100%;
font-size:1.4em;
padding-left:3px;
}
h4.goldbarheading {
color:#0050A0;
background:#FFCC66;
text-align:left;
width:100%;
font-size:1.1em;
padding-left:3px;
}
h5.goldbarheading {
color:#0050A0;
background:#FFCC66;
text-align:left;
width:100%;
font-size:0.8em;
padding-left:3px;
}
#column1 ul {
list-style-position:inside;
}
#column2 ul {
list-style-position:inside;
}
#column3 ul {
list-style-position:inside;
}
#subnavblock {
padding: 2px;
background: #0050A0;
}
#subnavblock ul {
margin: 0;
}
#subnavblock ul li {
display:inline;
list-style:none;
border-left: thin solid #FFF;
padding-left: 5px;
}
#subnavblock ul li.first {
border-left:none;
color:#FFF;
}
#subnavblock ul li a {
color: #FFF;
text-decoration: none;
font-weight:bold;
}
#navblock {
padding: 2px;
background: #FFCC66;
}
#navblock ul {
margin: 0;
}
#navblock ul li {
display:inline;
list-style:none;
border-left: thin solid #0050A0;
padding-left: 5px;
}
#navblock ul li.first {
border-left:none;
color:#FFF;
}
#navblock ul li a {
color:#0050A0;
text-decoration: none;
font-weight:bold;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>GO Home</p>
<div id="rightheader">
<p>Welcome to the WBAL Channel</p>
</div>
</div>
<div id="navblock">
<ul>
<li class="first"><a href="/index.htm">Home</a></li>
<li><a href="snicker.html">Snicker</a></li>
<li><a href="snicker2.html">Snicker2</a></li>
</ul>
</div>
<div id="subnavblock">
<ul>
<li class="first"><a href="finished.html">finished</a></li>
<li><a href="header_test.html">header test</a></li>
<li><a href="index2.htm">index 2</a></li>
</ul>
</div>
<div id="column1">
<h2 class="goldbarheading">Lessons Learned</h2>
<ul>
<li>Submit a lesson</li>
<li>Search Lessons Learned</li>
<li>Access your Lessons Learned Account</li>
</ul>
</div>
<div id="column2">
<h2 class="goldbarheading">About the Lessons Learned Program</h2>
<p>Here is where I will place a lot of information about this program as soon
as the content owner deigns to provide it to me. As of now I have zippo
to work with so I must make it up as I go along. I once heard a quote that
was something like this </p>
<blockquote>Lie to the people, make it up as you go along</blockquote>
<p> I think this is very appropriate for most web developers as we poke in
this kind of bogus text</p>
<h3 class="bluebarheading">Now collecting Lessons Learned on the following
topic areas</h3>
<ul>
<li>Shoe tying process</li>
<li>Jury nullification procedures at the Jackson trial</li>
</ul>
<h3 class="bluebarheading">Lessons Learned Quote</h3>
<blockquote>I have learned my lesson -- Michael Jackson</blockquote>
</div>
<div id="column3">
<h2 class="goldbarheading">Latest News</h2>
<ul>
<li>Michael Jackson Learns Lesson</li>
<li>Martha Stewart Learns Lesson</li>
<li>Jemal Lewis Learns Lesson</li>
</ul>
<h3 class="bluebarheading">Lesson of the Month</h3>
<p>Jury Nullification sets Jackson Free</p>
</div>
<div id="clearfooter"></div>
<div id="footer"> <span class="contentowner">Content Steward: Ima M Portent<br />
Page Publisher: Michael Hatch<br />
Last Reviewed: 14 June 05<br />
Last Modified: 14 June 05</span> <span class="declouter">Content on customer
site <br />
<span class="declinner">in existince since 1999</span> </span> </div>
</div>
</body>
</html>
If you want full length column colurs then simply repeat a background image on the main container that contains all column colours and borders.
Hope that helps 
Bookmarks