Width of IE explorer scroll bar?

Question

I have a client with a resolution Width of 1200 on their monitor and I need to maximize the width of my web site but I don't want the client to have to use the horizontal scroll bar. What is the max width you can use in a website in IE 7 with a screen resolution of 1200 without needing to use a horizontal scroll bar(Other users will have a larger width and all users must have the same width)?

Extra info- The web site is already built and can not use a width of 100% as this has bad consequences in a non textual web site. Yes the resolution is a width of 1200 (the client has a 1920 X 1200 resolution monitor that is set on its side).

The OS is Vista and as the client is government he will have Vista at least through 2010 and can not change his theme/browser etc.

Answer 1

Just don't hardcode any pixel widths?

Answer 2

It doesn't seem likely that you're going to get it down to the exact pixel; since users can change their Windows theme, the right-hand scroll bar can vary in width.

Most websites I have seen do this allow their website to "float" into the width of the page by using CSS.

Answer 3

how about:

body{
  width:100%;
}

and by this I mean, let the user size their browser to whatever they want, and make your content fit their screen.

Update:

As users have noted below, sometimes 100% is a bit too much... for those cases I would highly recommend this article & demo by Cameron Adams (The Man In Blue) that applies fluid layouts that re-arrange the content/CSS bases on the width of the browser.

Answer 4

Simple, the maximum width is 100%.

Seriously though, what possible reason could you have for designing a website to the scale of a single persons single computer? What happens when they buy a new computer?

I design any fixed-width sites to roughly 900-1000 px and center it. This is the general approach taken by most sites and I strongly recommend not straying from it unless your design is capable of using percentage widths. Your client will understand if you explain it in these terms and show them any of the thousands of popular sites following this behaviour.

Answer 5

You asked two questions, really. To answer the title question:

20px (IE7, Windows XP, Default Theme)

Everybody else has done a great job of answering the real question.

Answer 6

If you don't want to set the body width in css to 100%, then set it at about 95%. That will still allow the page to expand/contract to the end-user's desired width, down to only 400 width without a horizontal scroll.

The following formula should work for you, whether you use it for minimum or maximum page widths.

$safe_PgWidth_Percentage = (1 - (20/$minPageWidth));

While users in a restricted environment may not be able to change their operating system, browser, etc. I cannot imagine that they would not be able to grab the corner of their browser window and reduce or enlarge it by dragging.

That's the point your commentors are making. Coding the body to a percentage, in fact as close as possible to 100%, takes care of useability issues, including fixing your horizontal scrolling dilemma.