1

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?

Ciro
  • 253
  • 2
  • 5
  • 23
  • kindly provide me view on jsfiddle then we can help you out easily – Muhammad Hamza Nisar Mar 02 '16 at 10:02
  • Do you get the same issue in other browsers? – Andy Holmes Mar 02 '16 at 10:03
  • 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
  • Also, that's not a `margin`...it's positioning. – Paulie_D Mar 02 '16 at 11:35

2 Answers2

1

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

right: calc(~"100% - 960px");
Ciro
  • 253
  • 2
  • 5
  • 23
-1

Please define the width of your div Like

div {  
  width: 90%; /* fallback if needed */  
  width: calc(100% - 3em);
}
ketan
  • 19,129
  • 42
  • 60
  • 98