Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    53
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question 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?
    Last edited by bonecone; 09-02-2011 at 03:20 PM. Reason: explain more clearly

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    53
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks! It only works in Firefox though. Guess I'll have to wait until the standard is supported in all browsers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •