I'm using the css screen media and the css print media to create two different versions of my website. I have a div that is visible to the screen but invisible when you print, and another div that is visible when you print but invisible on the screen. Both of these divs contain the exact same content, but the print version is organized into two columns of text and the screen version is just one column. So when the website prints out on paper it is in two columns. But you can't do this just by creating a two-celled table for the left and right columns. Otherwise, when you print out the document you would have to read all the way down the left side of the document, then go back to page 1 and read all the way down the right side of the document. You need to have a left and right column for each page, which matches the height of the page, so that bits of the previous or following pages don't show up on the current page. And because each browser has slightly different default margins, you can't make one that will print properly in all browsers. Unless there's a way that you can. Is there any special coding trick that will let me do this?
You can dynamically build the table after you get the window height of the browser (sent to the server by the client-side code). Better you than me, though - I think I'd look for another job if I were asked to do that. I'd rather just shoot the data to the user as a pdf that I create dynamically. Then the user can click the print button and print the pdf as he sees it.
You have some contol via css but try to keep it simple. Remember that if your target market is international then you need to cater for letter and a4 paper. They are very different shapes.