Question

I’m trying to set up a page so that the navigation bar has a background that extends horizontally past the edges of the window, but the actual content of the page remains within a 960px wide container.

Here’s a link to what I’ve got so far, it looks the way I want it to but there’s a problem.

http://jsfiddle.net/pFDDV/3/

The problem is that the page will still scroll horizontally to the end of the over extended div, on the right side. It DOESN’T have this problem going left, only right (which I assume is due to the way elements deal with negative margins/positioning). I thought I might be able to just get away with:

body {
    width: 100%;
    overflow-x: hidden;
}

Which hides the bottom scroll bar, but you can still scroll right with the arrow key, and if you resize the page smaller than the 960px of actual content, you don’t get a horizontal scrollbar like you should.

Is there any way I can make the page ignore the width of just that one div?

I’m 99.9% sure I saw this work somewhere, but I can’t remember where, and research on the top/left, bottom/right rules of negative margin/positioning leads me to believe this just might not work. Any ideas?

Also: I know I could probably do this with a repeating background image, but I’m trying to avoid using images.

Answer 1

You can use position:absolute & write like this:

#mWrapper {
    background: none repeat scroll 0 0 red;
    height: 30px;
    left: 0;
    position: absolute;
    right: 0;
}

check this http://jsfiddle.net/sandeep/pFDDV/5/