calc() in less doesn't work

Question

I want a div has a right margin depending of the screen width. I wrote the following CSS rule:

...{
   right: calc(100% - 960px);
}

But I see in the following result in firebug:

right: calc(-860%) !important;

How can I fix it?

kindly provide me view on jsfiddle then we can help you out easily — Muhammad Hamza Nisar, Mar 02 '16 at 10:02
Make sure you have a space between "100%" "-" and "960px" in your code. Like your example. — Alexis, Mar 02 '16 at 10:07
try with this code " right: calc(100% - 960px); " if it dont work let us know in which browser you are facing issue. — Iqbal Pasha, Mar 02 '16 at 10:10
I get this error in Chrome 48, IE 11 and Mozilla Firefox 44. — Ciro, Mar 02 '16 at 10:15
I'm unable to replicate this in Chrome 48 on Windows using Chrome's built-in development tools to view the computed value. — James Donnelly, Mar 02 '16 at 10:19
The problem is that takes 100% like 100 for the sum and not like the 100% of the width — Ciro, Mar 02 '16 at 10:52
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Mar 02 '16 at 11:34

score 1 · Answer 1 · answered Mar 02 '16 at 13:51

1

My problem was using less instead of css. I resolved doing

right: calc(~"100% - 960px");

answered Mar 02 '16 at 13:51

Ciro

score -1 · Answer 2 · edited Mar 02 '16 at 10:05

-1

Please define the width of your div Like

div {  
  width: 90%; /* fallback if needed */  
  width: calc(100% - 3em);
}

edited Mar 02 '16 at 10:05

ketan

answered Mar 02 '16 at 10:03

Manoj Singh

2 Answers2