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
  1. #1
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Can we do calculations in CSS?

    For example, if I wanted to set width: (6em-11px); this obviously doesn't work, but does anyone have a trick that acheives this (w/out JS)?

    ~ Mo

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You will probably need to use xslt along with an xslt stylesheet. Its not an easy concept to grasp. It takes time. What exactly are you trying to do?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    And CSS is not a programming language so such calculations are not possible.

  • #4
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Thanks for both replies.

    What I am trying to do is set flexible div width according to its sibling with a fixed width.
    IE (example only):
    <div id="wrapper" style="width:50em;">
    <div id="right" style="width:25px;"></div>
    <div id="left" style="width: (50em-25px);"></div>
    </div>


    ~ Mo

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    In that case just float the right div to the right and add a right margin on the left div.
    Code:
    <div id="wrapper" style="width:50em;">
    <div id="right" style="width:25px;float:right;"></div>
    <div id="left" style="margin-right:25px"></div>
    </div>
    You will need to overcome the IE 6 3px bug although if there is no background image in "left" then you won't need to worry about it.

    http://www.positioniseverything.net/...reepxtest.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    422
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Yeah, but that would be a logical solution, and who wants to deal with that?

    Na, really. Thanks-a-bunch.

    ~ Mo

  • #7
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Use calc( )

    Quote Originally Posted by mOrloff View Post
    For example, if I wanted to set width: (6em-11px); this obviously doesn't work, but does anyone have a trick that acheives this (w/out JS)?

    ~ Mo
    Simply use,

    width: calc(6em - 11px);

    It works..!!

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,698
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    But be aware that…
    Quote Originally Posted by https://developer.mozilla.org/en-US/docs/Web/CSS/calc

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.


  •  

    Posting Permissions

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