Have Geek Brain

How do I make the wrapped div fill the window horizontally?

I have a div that is contained within another 960px centered div. I add a background to the inner div that should expand completely to the edge of the window horizontally, essentially out of the bounds of its container. If I apply a large negative margin and an equal amount of padding, it works on the left side, but a scrollbar appears on the right side. Does anyone know how I can achieve this without calling scrollbars?

+2


a source to share


3 answers


You can completely position the inner div:

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 a parent.

+1


a source


I always put my overlay DIV outside the content wrapper so it is not limited by layout.



If you're in the box (no pun intended), you can add this DIV with JavaScript, putting it where you want the DOM.

0


a source


It looks like the outer div is set to (or inherits) overflow: auto, not overflow: visible.

0


a source






More articles:


All Articles