CSS - Stretchy Css Banner?

Im just starting trying to use more css instead of relying on tables. i think i have most everything worked out except for one thing: my navigation is on the left and i want the background color to stretch all the way down to the footer, regardless of how tall or short it is. is there any way i can work around this? thanks!

The CSS:

html,body{margin:0;padding:0; height:100%}
body{font: 76% arial,sans-serif;}
* html #outer{height:100%;}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative; padding-bottom:20px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px;}
div#content p{line-height:1.4}
div#navigation{background:#009900}
div#extra{background:#FF8539}
div#container {width:100%; min-height:100%; margin-bottom:-50px; height:auto}
/*for fixed center w/ liquid sides ~~ width:800px; margin:0 auto ~~ */

div#wrapper{float:left;width:100%; height:100%}
div#content{margin: 0 200px; height:100%}
div#navigation{float:left;width:200px;margin-left:-100%; height:100%; border: 1px solid #009900}
div#extra{float:left;width:200px;margin-left:-200px}
div#footer{ float:left; width:100%; }
div#footer{background: #333;color: #FFF; clear:both; height:150px;}
div#footer p{margin:0;padding:5px 10px 5px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#clearfooter{clear:both;height:50px;}


The Html:

<div id="container">
<div id="header">
<h1>We Sell Real Estate</h1>
</div>
<div id="wrapper">
<div id="content">
<p><!-- TemplateBeginEditable name="EditRegion1" -->EditRegion1<!-- TemplateEndEditable --></p>
<div id="clearfooter"></div></div>
</div>
<div id="navigation">
<ul class="glossymenu">
<li><a href="(URL address blocked: See forum rules)">Home</a></li>
<li><a href="(URL address blocked: See forum rules)">Our Listings</a></li>
<li><a href="(URL address blocked: See forum rules)">Our Agents</a></li>
<li><a href="(URL address blocked: See forum rules)">Request Info</a></li>
<li><a href="(URL address blocked: See forum rules)">Area Info</a></li>
<li><a href="(URL address blocked: See forum rules)" target="_blank">Missouri Info</a></li>
<li><a href="(URL address blocked: See forum rules)">Mortgage Info</a></li>
<li><a href="(URL address blocked: See forum rules)">FREE Market Analysis</a></li>
<li><a href="(URL address blocked: See forum rules)">Links - Resources</a></li>
<li><a href="(URL address blocked: See forum rules)">Link to Our Website</a></li>
<li><a href="(URL address blocked: See forum rules)">Office Location</a></li>
<li><a href="http://mailto:design@uscybertek.com">Send E-Mail</a></li>
<li><a href="(URL address blocked: See forum rules)"><br>
<img src="(URL address blocked: See forum rules)" alt="FREE HOMEBUYER'S GUIDE - YOU NEED THIS INFO!" width="100" height="91" vspace="0" border="0" align="center"><br>
CLICK HERE!</A></li>

</ul>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> Here we can put a slideshow, mortgage calc, weather... </p>
</div></div>
<div id="footer">
<p class="footer" style="padding-right: 10px; padding-top: 10px;"><br>
Real Estate Company ~ My Name, Owners/Brokers<br>
123 First St. ~ Houston, Missouri 123456 ~ Office: 417-967-2011<br>
Fax: 417-967-2011 ~ E-Mail: <a href="mailto:design@uscybertek.com">design@uscybertek</a> ~ <a href="(URL address blocked: See forum rules)" class="lcolors">Site
Map</a> ~ <a href="(URL address blocked: See forum rules)" target="_blank" class="lcolors">Missouri
Real Estate</a><br>
<a href="(URL address blocked: See forum rules)" target="_blank"> <img src="(URL address blocked: See forum rules)/links/ml_small_mo.gif" border="0" align="middle"></a> ~ <img src="(URL address blocked: See forum rules)" align="middle"><br />
<!-- #include virtual="/includes/footer.txt"-->
</p>
</div>

I'm trying to do one of those cool, gel looking TH's in my CSS, but I'm not sure how, especially since I'm using Mambo (which gives me less overall control).

So I have my three images: the right and left corners, and a 1px wide strip to be repeated for the middle section.

Can someone explain if this is possible and how to accomplish it?

Hi there,
I have the following in my css file:
} #headerBannerWrapper {
background-image: url(/GREENLOGO.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-color: #DEF2B0;
padding: 0px;
margin: 0px;
} #headerBannerWrapper img {
padding: 0px;
margin: 0px;
vertical-align: bottom;
However the banner doesn't get rendered in IE7. It renders OK in IE8

Any help most appreciated.

The above is linked to the following class:
.clearFix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;

NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed.

hmm i cant get this to work...

i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide.

how can i get this 2 in a div wich get width by % and center aligned on the page?

and also on a layer above other stuff