Imprimer Version imprimable, en essayant d'imprimer 2 colonnes informations

Question

Voici une page que je suis en train de faire imprimer amical, il énumère tout dans deux colonnes

view the page here

Voici le css pour la div chaque bloc d'information est en

#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; 
} 

Quand je vais imprimer la page, il imprime dans une seule colonne, au lieu de la façon dont il regarde la page.

Toute aide est appréciée.

Answer 1

Changer votre lien vers la feuille de style pour être l'écran et l'impression

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

Testés en éditant la source sur votre page (Firebug), cela fonctionne.

Answer 2

La meilleure pratique est que vous devriez avoir un deuxième fichier css spécifiquement pour l'impression inclus sur votre page d'origine. Ceci élimine le besoin d'une deuxième page imprimable:

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

Answer 3

De plus, si vous préférez avoir une feuille de style unique à tous les médiums Cater, vous pouvez utiliser ceci:

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

Et vous pouvez aussi Utilisez des blocs dans vos fichiers CSS pour séparer les styles spécifiques aux médias comme suit:

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