Question

What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:

<div id="Header_Container">
  <div id="Header_Left"></div>
  <div id="Header_Center"></div>
  <div id="Header_Right"></div>
</div>

The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.

I can not get the CSS to work properly.

Answer 1

You must fix it using padding and box model + position : relative – it can be done without HTML Change

<div id="Header_Container">
  <div id="Header_Left"></div>
  <div id="Header_Right"></div>
  <div id="Header_Center"></div>
</div>

And CSS ( 100px is for example )

#Header_Container{ overflow: hidden; height: 100px; } 
#Header_Container *{ box-sizing: border-box; height: 100%; } 
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }

Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example