网页右侧出现奇怪的空白

Question

I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page. Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space. Code can be seen here http://jsfiddle.net/FW98q/

MY gut feeling is the problem is at:

 #Navigation_Container {

    background: #3399cc;
    height: 50px;
    //width: 960px;
    //margin: 0 auto;

}

Help is much appreciated.

Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)

Answer 1

I found the issue....Its in the class '.notice' that is in the footer...if you remove

position:absolute;

It works just fine. :) Check it out! Fiddle

I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.

Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this

position: absolute;
bottom: 0px;
left:0px;

Here is an example with the left:0px added

FIDDLE

Answer 2

#page_container, #Header {
    width: 960px;
}

Made sure these two element are the same width as the others if you want them to be the same width.

Answer 3

// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.

Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.

Answer 4

添加到你的 css

body{margin:0;}