Search code examples
htmlcsslayoutfluid-layoutweb-testing

Strange Blank space appearing at right side of the web page

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..:)

Solution

  • 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.

    enter image description here

    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