How do you make a wrapped div fill the window horizontally?

I have a div whi开发者_如何学编程ch is contained by another 960px-wide centered div. I'm adding a background to the inner div which should expand all the way to the window's edges horizontally, essentially escaping the boundaries of its container. If I apply a large negative margin and equal amount of padding, this works on the left side, but the right side causes a scroll bar to appear. Does anyone know how I can achieve this without causing scroll bars?

You could position the inner div absolutely:

CSS

.outerdiv { width: 960px; background: #999; height: 50px; }
.innerdiv { position: absolute; top: 100px; left: 0; background: #ccc; width: 100%; }

HTML

<div class="outerdiv">This is in the outer div
 <div class="innerdiv">This is in the inner div</div>
</div>

or better yet, move the div to have the document body as it's parent.

It sounds like the outer div is set to (or inheriting) overflow:auto rather than overflow:visible.

I always put my overlay DIV outside of the content wrapper, that way it is not constrained by the layout.

If you're boxed-in (no pun intended) you can add this DIV using JavaScript, putting it wherever in the DOM you want.