I'm trying to make a webpage that will display normally in a browser, but when printed will print using 2 columns per page. Is there a way to get the text to flow from the left to right column, and have it paginate correctly?
2 Answers
In CSS3 there is a Multi-Column module which is designed just for this.
Unfortunately, being CSS3 the column-count
property is currently only supported in Firefox 3.6 -moz-column-count
, Safari 4 and Chrome -webkit-column-count
, as you can see in this overview:
http://www.standardista.com/css3/css3-columns-browser-support
But there is a javascript library that will add this functionality to most older browsers! You can find this script, as well as a really good explanation of the multi-column module in this 2005 article on A List Apart:

- 154
- 1
- 4
-
Apparently my google-fu massively failed on that one if it missed alistapart. – travistravis May 03 '11 at 14:52
Well I think it will mainly depend on how you have structured your HTML code.
But this is a good example to hopefully get you started: http://dev.joeblade.com/2009/08/using-css-columns-in-print-layouts/. Unfortunately, this works only in Firefox.
You may need to create a seperate print page with the two column structure.

- 323
- 1
- 5