Print friendly version, trying to print 2 columns of info

Question

Here is a page I am trying to make print friendly, so it will list everything in two columns

view the page here

Here is the css for the div each block of information is in

#off-campus-print-friendly {
  font-family:arial;
  border:1px solid red;
  overflow:auto;
  font-size:.8em;
  line-height:1.5em;
  padding:10px;
}

#off-campus-print-friendly div {
  width:45%;
  float:left;
}

#off-campus-print-friendly p {
  margin:5px 0;
}

When I go to print the page, it only prints it in one column, instead of how it looks on the page.

Any help is appreciated.

Answer 1

Change your link to the stylesheet to be screen and print

<link rel="stylesheet" type="text/css" media="screen, print" href="http://www.herkimer.edu/?css=styles/print.v.1245694939" charset="utf-8" />

Tested this by editing the source on your page (firebug), it works.

Answer 2

Best practice is that you should have a 2nd css file specifically for printing included on your original page. This eliminates the need for a second print friendly page:

<link rel="stylesheet" type="text/css" media="print" href="print.css" charset="utf-8" />

Answer 3

Also, if you'd rather have a single stylesheet cater to all mediums, you can use this:

<link rel="stylesheet" type="text/css" media="all" href="master.css" charset="utf-8" />

And you can also use blocks within your CSS files to segregate medium specific styles like this:

@media print {
    p { font-size: 14pt; }
}
@media screen {
    p { font-size: 12pt; }
}