Why doesn't the CSS calc() function work for me?

Question

I learned about the CSS function calc() and its awesome. I tried to use it like:

#abc{width:calc(100%-20px)}
<         


        

Answer 1

It's both correct that IE9 supports CSS calc() and that you have to put spaces around a minus in calc.

Although knowing that I just had a very similar problem with IE9, where width: 50% yielded a different result than width: calc(50%). It turned out that it had to do with the display type which was set to inline-table. Changing it to inline-block made calc() work again. Note that http://caniuse.com/#feat=calc marks IE9's calc() support as "partial".

Answer 2

You need spaces and also if you use preprocessor format it like this calc(~"100% - 20px") or it might not work.

Answer 3

The operator “-” must be surrounded by spaces:

#abc{width:calc(100% - 20px)}

Quoting MDN info on calc(): “Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length.”

The formal statement on this is in clause 8.1.1 of the CSS Values and Units Module Level 3 CR.

Answer 4

IE9's implementation of the calc() method doesn't work on elements which are display: table.

You can work around this by wrapping a div around it (which is display: block) and making the width of the display: table element inside width: 100%. You apply the calcd width to the surrounding div.

Answer 5

All the modern browsers except Android's native browser support calc() which makes it easier to adopt. But do note that it can have a big impact on the layout and the consequent breaking of your design on unsupported browsers.

You should use it with a fallback declaration, so it doesn't break browsers which don't support it.

width: 500px; /** older browsers **/ 

width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/

width: -moz-calc(50% - 20px); /** FF 4-15  **/

width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/

Answer 6

First of all, there should be spaces before and after + or -. You can also use * , /, and combine them. See example:

.gen {
  height: 100px;
  background-color: blue;
  border: solid 1px black;
}

.nocalc {
  width: 50%;
}

.calc {
  width: calc(100% / 4 * 2 + 50px - 40px); 
  /* 50% + 10px */
}

<div class="gen nocalc"></div>
<div class="gen calc"></div>

It works with display: table, but it does not work with display: table-row(row takes whole space) and does not work with display: table-cell (if one cell it takes whole space; if several - each cell takes space according to its content).

.cont-1 {
  background-color: yellow;
}

.cont-2 {
 background-color: red;
 border: solid 1px black;
}

.width-m-50 {
  width: calc(100% - 20px);
  height: 100px;
}

.tab-simple {
  display: table;
}

.tab {
  display: table;
  border: solid 1px black;
  background-color: yellow;
  width: 100%;
}

.tab-row {
  display: table-row;
}

.tab-cell {
  display: table-cell;
}

<div class="cont-1"> 
  <div class="cont-2 width-m-50"> 
    div with width: calc(100% - 20px);
  </div>
</div>

<div class="cont-1"> 
  <div class="cont-2 tab-simple width-m-50"> 
    tab with width: calc(100% - 20px);
  </div>
</div>
<h3> tab with width 100% and two cells, 1-st with width calc(100% - 20px); 2-nd without: </h3>
<div class="tab">
  <div class="tab-row"> 
      <div class="cont-2 tab-cell width-m-50"> 
        cell
      </div>
      <div class="cont-2 tab-cell"> 
        cell 
      </div>
  </div>
</div>