title: How to achieve a left and right background split leaving middle div visible?
body: <p>I have a <code>header-Container</code> div which stretches 100% of the width of the browser, just like on StackOverflow. Within this div is the actual <code>header</code> with a fixed width which is centered on the page. </p>
  
  <p>What I want is to have a particular background colour only applied to the left side of the header, and a different colour applied to the right side of the header. I'm essentially trying to create a split background colour scheme on the <code>header-Container</code> div.</p>
  
  <p>Here is a JSFiddle of where I am at the moment <a href="http://jsfiddle.net/1orddfn7/" rel="nofollow"><strong>http://jsfiddle.net/1orddfn7/</strong></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header-Container"&gt;
      &lt;div id="header"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header-Container { background-color: #CCC; position: relative; height: 190px;}
  #header { background-color: red; width: 400px; height: 190px; margin-right: auto; margin-left: auto; }
  </code></pre>
  
  <p>I can't apply two background colours and split them at the 50% mark on the header-container div (I'd like maximum browser compatibility if possible). So I was thinking that I need to create two additional divs such as <code>header-bg-left</code> and <code>header-bg-right</code> and float them left and right respectively of the main center <code>header</code> div. But then I don't understand how to make them fill the remaining space to the edge of the browser window but stop at the edge of the <code>header</code> div. Is there a better way to do this?</p>