Print divs in two columns

I have a php application that generates data to a web page. The user then prints the document.

The data is divided into sections and each section is a div. The width of the div is fixed but the height can vary. I would like the printed output to be in two columns like so:

Page 1
---------------------
|  DIV 1  |  DIV 4  |
|---------|---------|
|  DIV 2  |  DIV 5  |
|         |---------|
|---------|  DIV 6  |
|  DIV 3  |         |
|         |         |
---------------------

Page 2
---------------------
|  DIV 7  |  DIV 10 |
|---------|---------|
|  DIV 8  |  DIV 11 |
|         |---------|
|---------|  DIV 12 |
|  DIV 9  |         |
|         |         |
---------------------

...and so on

Is this possi开发者_如何转开发ble to do without having to hard-code the structure? Perhaps some javascript/jquery solution?

You can't guarantee with HTML/CSS that it will print correctly in all scenarios, and you definitely don't want to go down the route of javascript to ensure correct printing (been there done that).

You're best bet is to dynamically create a PDF using a library such as iTextSharp.

There's a jquery plugin called Columnizer that I've used before that's quite good and I think does what you want.

If you'd be able to layout this page in pure CSS, that would be your solution:

http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

The browser will use the stylesheet defined for printing, when it is printing your page.

I found that using the css {column-count: 2;} works once place in the print tag