title: How to have fixed width div have hidden overflow equal on both sides of page
body: <p>In my site design, I need to have a div centered on the page 1280 pixels wide.</p>
  
  <p>The content within the div will be centered and 960px wide to accomodate most browser sizes.</p>
  
  <p>I need the extra width on the outer div to have hidden overflow on the left/right sides evenly so that the div spills outside the viewing window as the browser is resized/gets smaller.</p>
  
  <p>The layout is currently similar to this:</p>
  
  <pre><code>&lt;div&gt; //outer div: width 100%
    &lt;div&gt; //inner div: width 1280 pixels wide with background
      &lt;div&gt; //centered content: 960px wide
  
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><img src="https://i.stack.imgur.com/A9JNy.png" alt="enter image description here"></p>
  
  <p>In the image above, the darker blue is 1280px wide. The lighter blue is 960px wide, centered on page.</p>
  
  <p>I need the darker blue to overflow(hidden) off of both sides of the screen when the browser is resized..eventually leaving only the lighter blue centered before a horizontal scroll bar appears.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>My current problem is that the outer 1280px div will not overflow properly causing the center div to come off of center.</p>
  
  <p><strong>Fiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/tKtwg/1/" rel="nofollow noreferrer">http://jsfiddle.net/tKtwg/1/</a></p>
  
  <p>In the fiddle above, you can see that the outer div does not overflow evenly when you decrease the window size.
  <strong>Edit 2</strong>
  What I want to avoid is the horizontal scroll bar appearing until the 960 wide div is reached. Sorry I should have been more clear</p>