Simple CSS layout problem

[doctortim]

Hi guys

 

setting up the layout div's for a new website.

 

Essentially i have three divs that will act as columns. I want a central (centred) column of fixed width 1000px. and the left and right columns to scale their width according to the remaning screen width. The three columns currently sit inside an overall container div.

 

Here is the code:

 

HTML ...

 

<div id="container">

<div id="left_header"></div>

<div id="central_header"></div>

<div id="right_header"></div>

</div>

 

and CSS ...

 

body {margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }

 

#container {height:200px; width:100%;}

 

#left_header {float:left; height:200px; width:100px; background-image: url(img/heading-left.png);background-repeat: repeat-x;background-position: left top;}

 

#central_header {float:left; height:250px; width:1000px; background-image: url(img/main_header.png); background-position: left top;}

 

#right_header {float:left; height:200px; width:100px; background-image: url(img/heading-right.png); background-repeat:repeat-x; background-position: left top