CSS Calc returning 0 but works in my fiddle

Question

I am trying to use css3 calc but it returns 0%.

width: calc(100% - 100px);

On my local machine using this and then inspecting the element it displays:

width: calc(0%);

When I put it in a fiddle it seems to be working.

The part that is working is the blue content div being the proper width to be next to the sidebar where as on my local the content div have 0% width. It shows the content in the div but not the background colour blue.

Fiddle

Is there any reason calc would be returning 0? I am using the latest version of firefox.

I have looked up alternatives to calc and none suit my needs other than javascript the approach. But I would like to avoid that method. Any help is greatly appreciated.

Worth noting I was using Less

Answer 1

In less you'll need to escape calc

try: width: ~"calc(100% - 100px)";

N.b. try jsbin over jsfiddle. it lets you use sass and less.