Question

I’m using a 960px fixed width container for my site.

However, I’d like to add a wrapper that adds a box shadow to the page and increased the size of the left/right margins.

You can see the desired effect at http://jsfiddle.net/2QqxB/5/embedded/result/.

The problem is that at 1024 x 768 I get a horizontal scroll bar as the wrapper is 1020px.

So how can I achieve the same effect, without using a background image and without a horizontal scroll bar.

Code (also at http://jsfiddle.net/2QqxB/5/):

HTML:

<div id="wrap">
    <div id="container">
        <p>
            Lorem ipsum dolor sit amet...
        </p>
    </div>
</div>​

CSS:

html, body {
 height: 100%;   
}

body {
 background-color: #f3a450;   
}

#wrap {
 width: 1020px;
 box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.4);
 margin: 0 auto;
 min-height: 100%;
 background-color: #fff;
}

#container {
 width: 960px;
 margin: 0 auto;
}

Answer 1

You can make it work by using normal/min/max width on #wrap:

• min-width must be 960px because the internal content is that wide
• max-width must be 1020px because it is the default width of the white area
• width is set to 100% to always touch the edge of the window

See example: http://jsfiddle.net/2QqxB/7/

#wrap {
  max-width: 1020px;
  min-width: 960px;
      width: 100%;
}

#container {
  width: 960px;
}