Tweet
Creating a printable two-column website
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?
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?
Comment