Screen Resolution & Web Page Problems? - css

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

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:
remove "overflow: hidden".
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.

Answer 2

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