#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    194
    Rep Power
    13

    CSS Layout Problem...


    Hi all,

    So I've been looking at this Glish template and I've been trying to create a website with it.

    The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others.

    Is there any way to prevent this and make sure that column starts at the top, with the others?

    Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable?

    Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    194
    Rep Power
    13
    Oh yeah and does CSS work with printers? I realize this is a strange question, but I've had experiences in the past where pages have been printed half the way down an A4 piece of paper.
  4. #3
  5. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    16
    1. You can define a maximum text size, such that users of your website view it at the same font-size:Xpx; every single time...

    body{font-size:12 px;} or whatever number you choose that keeps that last column in check...
    2. CSS Will work just fine with printers.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    OK, I'm guessing you're using IE. When you enlarge fonts to the point that there is no place to break a line for wrapping, IE improperly widens the container. Using this layout, that means there is not enough room for the last floated element, so it drops down. I'm not picking on IE, that's just what it does. Moz will break things legally, but they're still broken.

    One possible fix is to size things relative to the font-size. The advantage is that as the font is enlarged or reduced, the whole layout will expand or contract with it.

    Edit style rules;

    body {font-size: 100%;}

    p { font-size: 1em;}

    #frame {width: 42em;}

    #contentleft {width: 11em;}

    #contentcenter {width: 20em;}

    #contentright {width: 11em;}

    Another advantage to using ems for font-sizing is that everything is relative to the user's preferred font size.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo