4

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

9
  • "Is there any reason calc would be returning 0?" - Yes, if the element is 100x wide (100% of 100px = 100px, minus 100px = 0). But not wanting to sound harsh, if it works in the fiddle then that isn't going to help us solve the problem much. Can you figure out the differences between the fiddle and your actual page?
    – GolezTrol
    Mar 18, 2015 at 15:30
  • @GolezTrol how could that element have a width of 100px when I am trying to set the width?
    – floor
    Mar 18, 2015 at 15:31
  • 100% is relative to the space it could occupy, right? 100% of the inner width of the parent so to say. So if that space is 100px, then there's your problem. Sorry if my explanation was unclear.
    – GolezTrol
    Mar 18, 2015 at 15:33
  • Are you using sass or less?
    – atmd
    Mar 18, 2015 at 15:33
  • @atmd I am using less
    – floor
    Mar 18, 2015 at 15:33

1 Answer 1

9

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.

1
  • I will look at jsbin.
    – floor
    Mar 18, 2015 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.