17

After researching I confirmed that calc should work for ie8+ but it is not working for me.

Here is a JS fiddle I made:

http://jsfiddle.net/75tzyLoo/

here is the code: HTML:

<div id="outer">
    <div id="inner">

    </div>
</div>

CSS:

#outer{
    width:400px;
    background-color:black;
    height:200px;
}
#inner{
    width:calc(80%-100px);
    width:expression(80%-100px);
    background-color:red;
    height:100%;

}

and here is the output I see: JS Fiddle output for calc not working

What am I doing wrong?

dippas
  • 58,591
  • 15
  • 114
  • 126
Ahmed-Anas
  • 5,471
  • 9
  • 50
  • 72
  • http://stackoverflow.com/questions/16034397/css-calc-alternative says to use `width: expression(100% - 500px);` – Stasik Aug 11 '14 at 11:07
  • `calc()` isn't IE8+ but IE9+. Refs: [caniuse](http://caniuse.com/#search=calc) and [Quirksmode](http://www.quirksmode.org/css/units-values/) – FelipeAls Aug 11 '14 at 12:10
  • 1
    I also discovered that `z-index: calc(100 + 1);` and even `z-index: calc(101);` are broken in IE11. – Neal Ehardt Feb 22 '17 at 22:15

2 Answers2

40

"-" should be surrounded with spaces width:calc(80% - 100px);

Demo

JunM
  • 7,040
  • 7
  • 37
  • 58
  • Lol. thanks . you'd think it would not go crazy over a missing space :). Cant accept your answer now but will once the timer runs out InshAllah. – Ahmed-Anas Aug 11 '14 at 11:10
  • wierd way to do math ^^ – singe3 Aug 11 '14 at 11:11
  • 2
    Whitespace is a killer on the calc() property. Also of note: calc() will not work properly with viewport units vw/vh and another type of unit. ie: calc(100vw - 25px) will not render, but calc(100vw - 2vw) would. – BJack Aug 11 '14 at 14:20
20

Demo

width:calc(80%-100px); change to width:calc(80% - 100px); (space between '-' sign)

4dgaurav
  • 11,360
  • 4
  • 32
  • 59