Hiding navigation on web page when printing

When printing a web page, we want to maximise the content area for printing. To do this, I want to hide the navigation area when user is printing the page.

For example in a page, there are 3 area, header, left navigation and content.

<div id="header">header</div>
<div id="nav">Left navigation</div>
<div id="content">Content area</div>

When user click on print, only the content area is printed. This can be control using a seperate CSS to hide certain area when printing.
The sample is below.

Add the css link in the page. The media type = "print".

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

In print.css

#header{display:none}
#nav{display:none}

This would hide the header and the nav div tag when printing.