Figure A.
Facebook's horizontal scrollbars showing up on a 1024x768 screen resolution. (Note this screenshot was took on my own PC using Firefox)
I was using my parent's computer the other day which is your standard Dell with a LCD monitor set at 1024x768. I decided to log on to Facebook, one of the internet's most popular websites. Upon logging in, using Internet Explorer 7, I was greeted with a wonderful horizontal scrollbar. I thought to myself "Facebook, the world's leading social network has horizontal scrollbars?". Sure enough, the Facebook developers failed to check their re-designed website in IE7, or possibly, on a 1024x768 monitor.
I wouldn't have minded if a horizontal scrollbar appeared if the design was targeted towards a higher resolution such as 1280x960 but this looked more like blatant oversight on Facebook's part. Look at how little of a horizontal scrollbar appears - Figure A.
Unnecessary Horizontal Scrollbars = Evil
Nobody likes horizontal scrollbars (unless of course your entire design relies on it). Horizontal scrollbars are annoying because they hide 15-17px of content at the bottom of you page. They are also confusing because the web browser is typically browsed un-directionally, due to limitations of the mouse's scroll wheel. When a user has to scroll down and over, this forces the user to abandon the mouse wheel and manipulate the horizontal scroll bar with the mouse's left button, thus wasting time.
So What Is The Available Screen Width In Various Browsers?
Had Facebook done their homework they would have realized that a content width of 1024px combined with a vertical scrollbar results in a horizontal scrollbar. Below is the maximum width you can use in various browser viewports, showing both with a vertical scrollbar and without:
| Without Vertical Scrollbar | With Vertical Scrollbar | Scrollbar Width | |
|---|---|---|---|
| Safari 3 | 1024 | 1009 | 15 |
| Firefox 3 | 1024 | 1007 | 17 |
| Chrome 2 | 1024 | 1007 | 17 |
| Opera 9 | 1023 | 1006 | 17 |
| Internet Explorer 7 | 1003 | 1003 | 17[1] |
| Internet Explorer 6 | 1003 | 1003 | 17[1] |
[1]IE incorrectly includes the scrollbar width in the element's width, thus the actual scrollbar width is 0px.
So What's My Point?
By looking at the chart above, we need to pick the lowest value as our maximum width. Seeing that 1003 is the lowest, which is used in Internet Explorer 6 & 7, if you plan to create a design for 1024x768, I would advise that you not make it wider than 1003 pixels. I would also advise that you never make your main content DIV an odd width. See http://csscreator.com/node/472#comment-2208 for more on that. My point is, you're better off choosing a width less than 1000px if you want to avoid horizontal scrollbars. Remember to always check you design in the early stages of development for your baseline screen resolution.
You might also be interested in my article Always Show Browser Scrollbars.
