View Full Version : printing cuts off right side of page

11-19-2010, 09:27 PM
When I print my website, the right-side margin gets cut off.

I use CSS and XHTML.

I have experimented with a couple of the CSS properties to see how the page would print:

(The header is defined by different rules and not the rules below and it has no problems - the placement of the header is centered when printing).

If I remove the margin-left: 26% portion from the stylesheet, the page prints out without cut-off; however, the text moves too far to the right, when viewing the page AND when printing. But there's no cut-off of the right margin.

If I remove the width: 700px, the page is very wide when viewing in a browser and too wide for my taste, but it's not cut off when printing and prints perfectly.

The problem is that in order for my page to look normal, these two variables need to be in place. But the printing is negatively impacted.

Is putting the content in a table a way to fix this issue?

Any assistance would be appreciated! Thanks!

11-19-2010, 09:34 PM
I think what you need to do (if you haven't already) is look at creating a stylesheet specifically for printing. You can then do something like so: (bear in mind this is a very simple example)

<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<div class="content">
Your content here...

The your stylesheets might look like so:


.content { width:700px; }


.content { width:100%; }

Does that help at all? You might have already tried this so sorry if i'm treading on old ground :)

11-20-2010, 12:23 AM
Thank you so much! That was the answer! I just copied the default stylesheet and deleted the width and margin-left elements and saved this as print.css. I also added the "screen" attribute to the main css reference and also a "print" attribute for the reference!

Thank you so much! Now, the print screen is perfect!