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 8 of 8

Thread: CSS Equations

  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Equations

    Im pretty new to css but i know the basics i think. Anyways i had a hard time finding out how css can do equations. I have 2 divs, one nav, one content. Now nav is 150px wide, and my content left starts at 150px. That is all fine but what i want to do is have the content div be as wide as the remaining width of the page. I want to do something like div#nav {width:100% - 150px;}.

    Anyone have any ideas ?

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A link to the page would be helpful. My guess is that you are using absolute positioning when it is not needed.

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is my layout.css file:

    <style type="text/css">

    * {margin:0px; padding:0px;}

    body {background-color:black;}

    div#nav {position:absolute; top:100px; left:0px; width:150px; background-color:red;}

    div#content {position:absolute; left:150px; width:100%; background-color:yellow; }

    </style>

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see what you're trying to do, and yes, absolute positioning is not really needed. You will need to use a wrapper div like so.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title></title>
    <style type="text/css">
    body, html, div { padding: 0; margin: 0; height: 100%; }
    
    #nav {
    width: 150px;
    background: #F00;
    float: left;
    }
    
    #content { background: #FF0; }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <div id="nav"></div>
    <div id="content"></div>
    </div>
    </body>
    
    </html>

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Something like this div#nav {width:100% - 150px;} is pretty much the Holy Grail amongst web designers. There really isn't any way to do that w/CSS yet; maybe in CSS3, though. For now Javascript is the way to go.

    In this case you don't really need this sort of thing (the float will work fine), but in other cases it'd be pretty helpful.

  • #6
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks alot, thats exactly what i wanted.

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by mark87
    You will need to use a wrapper div
    Maybe I'm missing something (entirely possible), but why?


    Incidentally, it's possibly a good idea to give the content div a margin-left to match the width of the nav instead of letting the nav div push the content div content over. Using a left margin means the content div box is sitting beside the nav div box rather than beneath it. Although it may not appear to change anything in your example code, I figure that it's better to have the bounds of the content div be where they appear to be rather than half tucked beneath the nav. It also serves to keep things more straight-forward should you start messing about with things like relative or absolute positioning or background images.

    e.g.
    Code:
    #nav {
    width: 150px;
    float: left;
    }
    
    #content {
    margin-left: 150px;
    }
    
    …
    
    <body>
    
    <div id="nav">nav</div>
    
    <div id="content">content</div>
    
    </body>
    Last edited by Bill Posters; 12-11-2005 at 08:27 PM.

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters
    Maybe I'm missing something (entirely possible), but why?
    Yea I realised after I posted it wouldn't be needed at all.


  •  

    Posting Permissions

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