Printing fluid websites

How to get single page print outs

[Noisehag]

Hello all,

One of the companies I build websites for has always insisted that I design fixed width sites so that when printed, it does not run off the edge of the page. The magic number appears to be a maximum of 705 pixels wide to prevent this from happening.

My question to all of you: Is there any kind of markup to force print outs to "shrink to fit" so I can gain the freedom of creating fluid designs for them?

[Purple Martin]

Use CSS to specify a print-only page width:

@media print
{
body { width: 705px; }
}

[TheDoctor]

If you use a fluid design, the printed version will adjust itself just the same as the version displayed on screen.

Trying to guess fixed width for a page seems a little dodgy, since the printed page is different for each browser (this I have checked). I think the margin size, at least in some browsers, can be adjusted by the user, so that adds another variable.

On a more subjective note: I loath pages that aren't fluid when I print them. I tend to think that the right-hand end of lines are important, and I tend to lose the sense of what's on the page if I can't read them.

[Noisehag]

Thanks for the input folks. In looking at the source of this forum and doing a print preview of it, the answer has been in front of me all along. The print preview is perfect and the source contains this on the outermost table:

<table cellpadding="1" border="0" width="90%">

So it's safe to assume that specifying width by percentage will always yield a page that prints without running off the right edge of the paper, no?

The only drawback I can see to this is when an end user's screen width is over 1024 x 768, there could potentially be a visual mess with content falling into places orginally not intended. Maybe a javascript rountine to detect resolution onload and set the width percentage based on the result? So like 800 x 600 = 90%, 1024 x 768 = 80%, 1280 x 1024 = 70%. What do you think?

[tedster]

You can avoid a visual problem by using max-width in the CSS, and a css "expression" to work-around for IE (which doesn't support max-width) - details here:

[webmasterworld.com...]

[Noisehag]

Okay, so the solution was an external stylesheet...

<link rel="stylesheet" type="text/css" media="print" href="print.css">

containing...

div.mainbody {width: 98%;}

I appears to work okay in IE and Opera. Print preview reveals nearly full width on a standard sheet of paper as long as I don't specify a pixel width for the body or main container. I think the solution will satisfy my client well enough for me to create some fluid designs for them now. :)

[TheDoctor]

Margins might work a bit better that width on a printed page. But if you're going to use width, I'd make it a bit narrower than 98%. Almost filling the width of the page with print usually makes it appear somewhat unreadable. Leave some space for the eyes to fid at each edge of the paper.

[Noisehag]

I monkeyed around with margins originally and it didn't seem to have an effect. I'll test print at a more narrow width as you suggest and see how it compares to what is being seen on screen. Thanks for the tips.