title: CSS Three columns header
body: <p>I have the following issue related to a three columns header.</p>
  
  <p>I need that the middle column be 960px width and centered. When document width is higher that 960px, other div columns come up and its width will depends on the exceded width.</p>
  
  <p>Here is an image <img src="https://i.stack.imgur.com/j37HO.png" alt="http://www.vanara.es/stack/Header-layout.png"></p>
  
  <p>The sideblocks of the header will contain a background-color, on the right one, and an image repeated-x on the left one.</p>
  
  <p>EDIT: it should be IE9/8/7 compatible.</p>
  
  <p><a href="http://jsfiddle.net/j6ReH/1/" rel="nofollow noreferrer">http://jsfiddle.net/j6ReH/1/</a></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="central"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .wrapper {
      width:100%;
      height:50px;
  }
  .central {
      width:960px;
      height:50px
      margin:0 auto;
      float:none;
      background-color:#CCCCCC;
  }
  .left {
      width:auto;
      height:50px
      float:none;
      background-color:#ABC123;
  }
  .right {
      width:auto;
      height:50px
      float:none;
      background-color:#123456;
  }
  </code></pre>