SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 column print problem

    I have the following report:

    Four columns that need content going vertically down. For some reason, I was thinking the following CSS/HTML would work:

    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css" media="print">
    #wrapper{
     width:480px;
     margin:0 auto;
    }
    #col1{
     float:left;
     width:100px;
     margin-left:20px;
    }
    #col2{
     float:left;
     width:100px;
     margin-left:20px;
    }
    #col3{
     float:left;
     width:100px;
     margin-left:20px;
    }
    #col4{
     float:left;
     width:100px;
     margin-left:20px;
    }
    #header{
     font-size:1.5em;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <h3>Student Records</h3>
    </div>
    <div id="col1">
    <p>Record One</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    </div>
    <div id="col2">
    <p>Record One</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    </div>
    <div id="col3">
    <p>Record One</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    </div>
    <div id="col4">
    <p>Record One</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    <p>Record Two</p>
    </div>
    </div>
    </body>
    </html>
    But, it comes no where close by showing the four columns in print view. If I switch to screen it works fine. I must be missing something that I'm not thinking about.

    Any help is appreciated.
    Ryan Butler

    Midwest Web Design

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,
    I wouldn't imagine px to be a good measurement for print.
    I haven't tried to print a layout like this before so this is pretty much guess work - but it seems logical enough..
    Code:
    #wrapper{
     width: 100&#37;;
    }
    #col1, #col2, #col3, #col4{
     float:left;
     width: 20%;
     margin-left: 5%;
    }
    IE may also need the rounding bug fix so all the columns fit.

    Let me know how it goes.

    Edit: Just tested your version in Firefox, it prints fine and dandy, so does my version and as I suspected IE needs a little more.
    Something like this should work:
    Code:
    #wrapper{
     width: 100%;
    }
    #col1, #col2, #col3, #col4{
     float:left;
     width: 20%;
     margin-right: 5%;
     margin-left: -1px;
    }
    Hope it helps

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I'm completely dense on this. I wasn't thinking straight when I coded/previewed this. Mine works fine in IE 7 and FF.

    That's what I get for coding a layout like this in 10 minutes.

    Thanks for the reply.
    Ryan Butler

    Midwest Web Design


Bookmarks

Posting Permissions

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