Question

I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.

I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.

Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/

In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.

I’ve tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.

Any help is much appreciated!

P.S. Stackoverflow’s tag helper seems to be down at the moment, so I’m placing this under css for now since I can’t think of any others.

Answer 1

One method is to wrap everything in a new div:

#container {
    overflow-x: hidden;
    min-width: 400px
}

See: http://jsfiddle.net/thirtydot/rxje6/1/