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