title: Getting percentages to work in CSS calc() for Firefox and Safari?
body: <p>I'm using the following calc() equation to calculate the width of two divs:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.MyClass {
      width: calc((100% - 800px) / 2);
      width: -moz-calc((100% - 800px) / 2);
      width: -webkit-calc((100% - 800px) / 2);
  }
  </code></pre>
  
  <p>This works fine for Chrome and IE, but not Firefox and Safari. I've noticed that Firefox seems unable to interpret the percentage. For example the following will display fine:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>width: calc((1000px - 800px) / 2);
  </code></pre>
  
  <p>Any advice?</p>
  
  <p>Thanks.</p>
  
  <p><strong>Update</strong></p>
  
  <p>So out my pre-processor is creating css that looks like this:</p>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.MyClass {
      width: calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
      width: -moz-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
      width: -webkit-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.MyClass {
    width: calc( ( 100% - 800px ) / 2);
    width: -moz-calc(100%-800px/2);
    width: -webkit-calc(100%-800px/2);
  }
  </code></pre>
  
  <p>I've tried correcting it but it still doesn't seem to be working.
  The code from the browser is still:</p>
  
  <pre><code>width: calc((100% - 800px) / 2);
  </code></pre>
  
  <p>It doesn't seem to be reading the -moz-calc though.</p>