Results 1 to 3 of 3
  1. #1
    Super Moderator BATcher's Avatar
    Join Date
    Feb 2008
    Location
    A cultural area in SW England
    Posts
    3,414
    Thanks
    33
    Thanked 195 Times in 175 Posts

    Mixing pixels and percent

    I need to modify someone's CSS, but the principle will apply in ordinary HTML. I think.

    I am attempting to widen the 'screen' to become (just less than) 1024 pixels from the original (just less than) 800 pixels, to take account of the fact that screens have become wider since the CSS was written.

    I'd like to have a fixed-width left-hand margin in pixels (to hold menus, etc), but be able to have the remainder vary according to the 'actual' screen width perhaps up to the 1024-pixel 'maximum'. For example, for a three-column table, I might want the individual column widths to be 40%, 30% and 30% respectively of the screen width less the pixel width of the left-hand margin.

    Is this sort of thing possible? Or do all widths have to be specified in % or in pixels?

    Thanks!
    BATcher

    Time prevents everything happening all at once...

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Mixing pixels and percent

    <P ID="edit" class=small>(Edited by jscher2000 on 19-Jan-09 12:17. )</P>It is difficult... The following will allow you to fix the overall width of the page, and the width of the left column, and specify percentages for the other columns, but when you reduce the width of the page below the maximum, there still is a horizontal scroll bar in Fx3 and IE7. I think IE6 did not implement max-width, so it would stretch the columns if the viewport were wider than 1000px.

    <pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test page</title>
    <style type="text/css">
    body {width:100%;max-width:1000px;font-family:sans-serif;}
    div#nav {width:248px;float:left;border:1px solid green;}
    div#main {margin-left:250px;border:1px solid blue;}
    div#col1 {float:left;width:30%;background:yellow;}
    div#col2 {float:left;width:30%;background:cyan;}
    div#col3 {float:left;width:40%;background:magenta;}
    </style>
    </head>
    <body>
    <div>
    <div id="nav">


    Nav Stuff</p>


    Nav Stuff</p>


    Nav Stuff</p>
    </div>
    <div id="main">
    <div id="col1">


    Col1 Stuff</p>


    Col1 Stuff</p>


    Col1 Stuff</p>
    </div>
    <div id="col2">


    Col2 Stuff</p>


    Col2 Stuff</p>


    Col2 Stuff</p>
    </div>
    <div id="col3">


    Col3 Stuff</p>


    Col3 Stuff</p>


    Col3 Stuff</p>
    </div>
    <div style="clear:left"></div>
    </div>
    <div style="clear:left"></div>
    </div>
    </body>
    </html></pre>


  3. #3
    Super Moderator BATcher's Avatar
    Join Date
    Feb 2008
    Location
    A cultural area in SW England
    Posts
    3,414
    Thanks
    33
    Thanked 195 Times in 175 Posts

    Re: Mixing pixels and percent

    Thanks for that, Jefferson - it does seem to be more difficult than I will be able to cope with, so I suspect I will just have to continue counting pixels...

    It's interesting to know that it can be done - and it works!
    BATcher

    Time prevents everything happening all at once...

Posting Permissions

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