Screen Resolution & Web Page Problems?

Question

When I change my screen resolution to 800x600, 640x480 and so on half my web page gets cut off including images I cant even use the scroll bar at all to see the rest of the page, I'm using percentages as well as pixels using CSS. Need help fixing? All browsers are affected. Here is a sample.

#top {
    background: #424ee0;
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow: hidden;
}

#center-top {
    margin: 0px;
    padding: 5px 0px 5px 0px;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    color: orange;
}

Answer 1

Before you try to fix your web page, have a look at these

Screen resolution statistics

Posted by Michael Bloch in web development (Sunday September 23, 2007 ) http://www.tamingthebeast.net/blog/web-development/screen-resolution-statistics-0907.htm

1 - 44.55% - 1024×768
2 - 13.98% - 1280×1024
3 - 12.43% - 1280×800
4 -  7.31% - 800×600
5 -  4.76% - 1440×900
6 -  3.47% - 1152×864
7 -  2.71% - 1680×1050
8 -  1.72% - 1280×768
9 -  0.97% - 1920×1200
10 - 0.81% - 1280×960

Note that 800 x 600 is only used by 7% of internet users and 640 x 480 didn't even make the list. That was in 2007. The author noted that 800 x 600 was rapidly dropping in popularity at that time.

Here's a chart that more clearly shows the trends:

Date         Higher 1024x768 800x600 640x480 Unknown 
January 2009   57%    36%       4%      0%      3% 
January 2008   38%    48%       8%      0%      6% 
January 2007   26%    54%      14%      0%      6% 
January 2006   17%    57%      20%      0%      6% 
January 2005   12%    53%      30%      0%      5% 
January 2004   10%    47%      37%      1%      5% 
January 2003    6%    40%      47%      2%      5% 
January 2002    6%    34%      52%      3%      5% 
January 2001    5%    29%      55%      6%      5% 
January 2000    4%    25%      56%     11%      4%

http://www.w3schools.com/browsers/browsers_display.asp

Answer 2

You have:

 overflow: hidden;

Specified in top. Top also has:

 width: 100%.

This means that it's set to 100% of the container. If center-top is contained by top, then its width is likely way more than 100% of the container (top). Overflow:hidden then overrides to scrollbar and hides all overflow.

If you want it to be visible either:

1. remove "overflow: hidden".

2. change it to "overflow: auto".

Something else:

You're explicitly setting width to 1200px. This means that anyone who has a horizontal resolution of less than 1200px, they will see scrollbars. Is that really what you want? Consider choosing a smaller width.