Question

In my site design, I need to have a div centered on the page 1280 pixels wide.

The content within the div will be centered and 960px wide to accomodate most browser sizes.

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.

The layout is currently similar to this:

<div> //outer div: width 100%
  <div> //inner div: width 1280 pixels wide with background
    <div> //centered content: 960px wide

    </div>
 </div>

In the image above, the darker blue is 1280px wide. The lighter blue is 960px wide, centered on page.

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.

Any ideas?

EDIT

My current problem is that the outer 1280px div will not overflow properly causing the center div to come off of center.

Fiddle

http://jsfiddle.net/tKtwg/1/

In the fiddle above, you can see that the outer div does not overflow evenly when you decrease the window size.
Edit 2
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

Answer 1

body
{
    background-color: #00a2e8;
    width: 100%;
}


.content
{   
    background-color: #99d9ea;
    width: 960px;
    margin: 0 auto; 
    min-height: 1000px
}