Creating Selectors to Style for Print

To style the two-column layout for print, you will use five selectors as shown in Listing 20.8.

Listing 20.8. CSS Code Showing the Selectors for Styling the Two-Column Layout for Print

body {...} h1 {...} #nav {...} #footer {...} a {...} 

Some Warnings About Styling for Print

When styling pages for print, you should be aware that floated containers and complex absolute positioning can cause problems in some browsers.

Long floated containers can cause problems in some versions of Mozilla and Netscape. These browsers sometimes have trouble calculating the length of floated containers and will only print the first page of the container's content.

Complex absolute positioning (also layouts that need to be pixel perfect) can cause problems for Internet Explorer 6. This browser has been known to crash when using Print Preview to view absolutely positioned layouts.

Although some floated and absolutely positioned content can be used, it is best to keep the overall layout as simple as possible when styling for print.

Many browsers do not print background images as a default. For this reason, background images should not be used to display information that is critical to the reader.