This article is a companion article to my "Browser Comparision of Available Screen Width When Using 1024x768" which I think many people found useful. The other day at work a co-worker complained to me that a webpage was getting cropped off when printing it. I then had to tinker with the width of a few different elements on the page to get it to fit. After finishing that I began to wonder, what the max-width is that can be used various browsers when printing.
I ran a quick test of all the browsers I had installed to see at what width, would the browser's print preview window crop off my fixed width DIV. Here are the results I found:
| Browser | Max-Width | Default Settings |
|---|---|---|
| Firefox 3 @ 100% | 686px | Shrink To Fit |
| Safari 4 | 718px | > 718px Triggers Shrink To Fit |
| Opera 9.5 @ 100% | 730px | 80% & Shrink To Fit |
| IE8 @ 100% | 670px | Shrink To Fit |
| IE7 @ 100% | 670px | Shrink To Fit |
| IE6 @ 100% | 670px | 75% |
Notes On My Results
You'll notice that many browser's default settings are set to 'shrink to fit'. This may solve the problem of extra-wide content when printing most of the time. I also decided, that when given the option, I would set the resize option to 100% to make all my browsers equal.
Also when I ran the test, I did not modify the page's margins which I'm sure would have an affect on the results. Safari also had an interesting feature that triggered shrink to fit when the content grew beyong it's max-width. I thought this was a pretty useful feature compared to most the other browsers.
Other results we can see, is Internet Explorer has stayed tried and true throughout it's past three versions sticking with 670px each time as it's max-width. Opera provides the most real-estate at 730px.
Conclusion
When writing print stylesheets knowing that the lowest common deneminator is Internet Explorer at 670px will help you when creating print stylesheets.
