css print styling

Question

I have a page which displays fine on the screen.

I have a css which then formats the screen for print and re-sizes the sections.

My problem is that the print

Answer 1

You can set the print margin (and landscape orientation) with CSS like:

@media print {
    @page {
        size: letter landscape;
        margin: 4.0cm;
    }
}

And the good news is, it works! (On Chrome. Not supported on other browsers though I did not test IE9.)

The margin must be in a unit that makes sense in print -- pixels are not allowed.

Chrome will not shrink the margin below a fixed minimum, which may be determined by the printer driver.

Answer 2

You could also try to set

margin:0; and padding:0;

to the html, main content div and p tags

and see if that helps.

Otherwise, your best bet is to set a specific width on your elements.