Preventing a div and its content from being printed

Question

I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.

How would I achieve this using CSS or JavaScript?

Answer 1

You are looking for @media print.

Answer 2

You can include a stylesheet that is only applied when printing.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css">

In that style sheet, you can hide your divs and make any other necessary changes.

Answer 3

http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

Bit more info on Print Style Sheets

Answer 4

Insert a stylesheet just for print:

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

Then put css to hide the div in that stylesheet

Answer 5

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

in this css file style put display: none; for elements you don't want to be printed

Answer 6

In your html, indicate a stylesheet used for printing:

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

And in this CSS:

#mydiv {display: none;}

Answer 7

A common method is to use a separate CSS for printing. You can have a css for all media and one for print:

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

In the print.css just put the display:none on the div.

Davide

Answer 8

Since it hasn't been stated here before, you don't necessarily need to have an external style sheet:

<style type="text/css" media="print">
 .hideMeInPrint { display: none; }
</style>

Answer 9

The simplest solution is to add this in the main CSS file. Do note that, when you link the CSS file, you should not specify the media attribute (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />):

@media print {
   div.classname {
     display:none;
   }
}