Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #140

How can I control which parts of my page print, and how, with CSS, in both CSS positioned and table-based designs?

The Answer

Prepared May. 2004 by Al Sparber, PVII

Assume you have 3 DIVs:

  1. DivMain for your main content
  2. DivSidebar for you navigation
  3. DivHeader for your masthead

You only want the main content to print, but you want it to fill up the entire page.

Assign current styles the screen media type

If your current styles are in a style sheet, assign a screen media attribute to the style sheet. The style sheet will only be used for the browser screen and will be ignored for printing. The media attribute can be assigned to either a linked, an imported, or an embedded style sheet, like this:

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

<style type="text/css" media="screen">
</style>

Create a print media style sheet and use these rules:

#DivSidebar {display: none;}
#DivHeader {display: none;}

2. Save it as print.css in the same folder as your main style sheets.

3. Link each page to this style sheet:

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

Note that you can also use this technique for table-based layouts. Just give the elements you wish to hide an ID:

<td id="sidebar">

Then use this rule:

#sidebar {display: none !important;}

Back to the questions list