...

View Full Version : Creating a printable two-column website



bonecone
09-02-2011, 12:46 PM
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?

vikram1vicky
09-02-2011, 06:22 PM
You cam use CSS# multi-column

http://www.w3.org/TR/css3-multicol/

http://www.quirksmode.org/css/multicolumn.html

bonecone
09-08-2011, 02:45 PM
Thanks! It only works in Firefox though. Guess I'll have to wait until the standard is supported in all browsers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum