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 Comparision of Available Print Area Width
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.


When writing print stylesheets knowing that the lowest common deneminator is Internet Explorer at 670px will help you when creating print stylesheets.

Related Articles