What I need to do is center a container div in my page, no matter what the width of the page is. The container will always be 800px wide and then as the page grows wider, there will be a left and right outside column which will also grow wider.

Here is my html
Code:
<div id="container">
<img id="header" src="header.jpg" />
<div id="navbar"><div class="foottext">LLRC > Home</div></div>
<div id="middle">
 <div id="left">
 <div id="navList">
 <li><a href="">Chez Nous</a></li>
 <li><a href="">Vistas</a></li>
 <li><a href="">Other Book</a></li>
 <li><a href="">CSS Design</a></li>
 </div>
 </div>
 <div id="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
 <div id="right"><br /><br /><br /><br /><br /><br /></div>
</div>
<div id="footer"><div class="foottext"> 2003 Saint Michael's College</div></div>
</div>
Here's the css
Code:
BODY{  /* Takes margins and padding out of page */
margin:0;
padding:0;
color:#000;
height:100%;
background:url('bgmain.gif');
font-family:'Trebuchet MS', Trebuchet, Verdana, Helvetica, sans-serif;
}
#container{   /* Wrapper for all divs on page */
position:absolute;
width:800px;
top:0;
}
img#header {   /* Formats the header on top of page */
position:relative;
left:0;
top:0;
height:150px;
width:100%;
border:0px;
}
#navbar{
position:relative;
left:0px;
top:-4px;
width:100%;
height:20px;
background-color:#333;
}
#middle {
position:relative;
left:0;
top:-4px;
width:100%;
background-color:#300;
}
#left {
position:absolute;
top:0;
left:0;
width:20%;
background-color:#300;
}
#content {
position:relative;
top:0;
left:20%;
width:60%;
background-color:#030;
}
#right{
position:absolute;
top:0;
left:80%;
width:20%;
background-color:#300;
}
#footer {
position:relative;
left:0;
top:-4px;
width:100%;
height:20px;
text-align:right;
background-color:#333;
}
Thanks,
Keith