Step 4: Hide the navigation and sidebars
One of the design goals for the printer-friendly page is to simplify the page layout by eliminating much of the navigation, advertising, sidebars, and other elements outside the main page content.

Navigation buttons are useless on a printout; there's no click-through capability to the ads, and the sidebar items that enrich the Web experience by offering links to related information mostly add clutter to a printout.

The key to eliminating these elements from the printer-friendly page is to have them segregated into separately identifiable divs in the markup. For example, the navigation bar might be in a div named navbar, styled like this:

div#navBar{
  margin: 0 79% 0 0;
  padding: 0px;
  background-color: #eeeeee;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

To hide the contents of that div on the printer-friendly page, use the following CSS:

div#navBar {
  display: none;
}

Use the same technique to remove ads, sidebars, headers, footers, animations, excess graphics, and other nonessential elements from the printer-friendly page.

Step 5: Set the width and margins
With the extraneous material hidden, it's time to style the remaining content so that it fits properly on a printed page. Often, the main content is in one div and might be styled so that it shares the screen with other elements such as the navigation bar and sidebar.

div#content{
  width: 75%;
  margin: 10px;
  padding: 10px 15px;
}

With those other elements gone from the printer-friendly page, all we need to do is fit the div on the printed page, like this:

div#content{
  width: 100%;
  margin: 0pt;
  padding: 0pt;
}

Setting the width: 100% simply fills the available print area on the page. Alternatively, you could set a specific width (in inches) and use margins and padding to exercise more control over the printed output, but you'd need to plan and test carefully to make sure your settings work with most printers.

Step 6: Unfloat the content
One troubling anomaly in the way some browsers print floated divs requires special attention. For instance, Geko-based browsers (Netscape 6+ and Mozilla) truncate the content from a floated element when it reaches a page break in printed output. The content isn't carried over to continue on the next page--it just disappears.

Fortunately, there's an easy workaround for this one. Simply remove the floats from the divs that remain in your printer-friendly page. After removing the sidebars and navigation, the page layout is usually simple enough that you don't need floats. To remove the float, use a style similar to this:

div#content2{
  float: none;
}

Step 7: Check for other styles that need adjustment
When you follow the preceding steps, this should take care of the major changes that are necessary to make a page printer-friendly. However, there are probably a few stray styles left that still need attention. This is the time to work through your document and style sheets and tidy up those loose ends. Use the Print Preview feature of your browser to preview the effect of your print media style sheet.

Michael Meadhra has been working in the field since the earliest days of the Web. His book credits span some three dozen titles.