Let's say I have a this markup:
<div id="container">
<div id="header">content</div>
<div id="left-column">content</div>
<div id="right-column">content</div>
<div id="footer">content</div>
</div>
The #container is centered and fixed at 1000px, #header and #footer are 1000px, and #content-left and #content-right are floated left, at 500px each.
How do I extend the header and footer background colors the full length of the browser window if the container is fixed?
First, change a little your html structure.
While you're there, why not using html5 for header and footer elements.
Html
<header>
<div class="container">
content
</div>
</header>
<div class="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<footer>
<div class="container">
content
</div>
</footer>
Css
Than, in the Css, set the header and footer width to 100% and make them de color you want. In this example red. Than use a class .container
that will make the content wherever you put it (header, main section, footer) display in the middle of the screen, but without any background color.
header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}
Hope this help :)