[SOLVED] Getting percentages to work in CSS calc() for Firefox and Safari?

Getting percentages to work in CSS calc() for Firefox and Safari?

I'm using the following calc() equation to calculate the width of two divs:

CSS

.MyClass {
    width: calc((100% - 800px) / 2);
    width: -moz-calc((100% - 800px) / 2);
    width: -webkit-calc((100% - 800px) / 2);
}

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:

CSS

width: calc((1000px - 800px) / 2);

Any advice?

Thanks.

Update

So out my pre-processor is creating css that looks like this:

SCSS

.MyClass {
    width: calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
    width: -moz-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
    width: -webkit-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
}

CSS

.MyClass {
  width: calc( ( 100% - 800px ) / 2);
  width: -moz-calc(100%-800px/2);
  width: -webkit-calc(100%-800px/2);
}

I've tried correcting it but it still doesn't seem to be working. The code from the browser is still:

width: calc((100% - 800px) / 2);

It doesn't seem to be reading the -moz-calc though.

Solution

Eureka. I've been struggeling with this for days. Finally found that 100vh instead off 100% would make it work with most browsers.

height: calc(100vh - 100px);

instead of

height: calc(100% - 100px);

Finally, now I can get on with my project.