How to Get a Negative Value with CSS Calc()

Is it possible to get a negative value with CSS calc()?

Yes, this is possible, to a point. The crucial part is to set the width of the element to 100vw then offset it by negative half the viewport width plus half the width of the centered element using, e.g. calc(-50vw + 200px):

Demo Fiddle

Given the HTML

<div id='center'>center
    <div id='full'>full width</div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
#center {
    width:400px;
    height:100%;
    background:red;
    margin:0 auto;
}
#full {
    width:100vw;
    height:100px;
    background:green;
    margin-left:calc(-50vw + 200px);
}

How can I get a negative value of a CSS variables in a calc() expression?

Yes you can do it. Simply multiply by -1:

:root {  --margin: 50px;}
body {  margin: 0 100px;  border:1px solid;}
.box-1 {  background: red;  height: 100px;  width: 200px;  margin-left: calc(-1 * var(--margin));}
.box-2 {  background: green;  height: 100px;  width: 200px;  margin-left: calc(-1 * (-1 * var(--margin))); /* You can also nest calculation */}

<div class="box-1"></div><div class="box-2"></div>

Is there a way to make CSS calc() never be a negative value?

Premising that there's no way to bound the values computed by calc() you could use a mediaquery when max-height is at most 650px

.my-margin-top {
    margin-top: calc(50vh - 325px);
}

@media all and (max-height: 650px) {
   .my-margin-top {
       margin-top: 0;
   }
}

or you might also revert the logic by wrapping the existing rule into a min-height mediaquery

@media all and (min-height: 650px) {
   .my-margin-top {
       margin-top: calc(50vh - 325px);
   }
}

How to avoid negative values from css calc function?

for all who are interested. I ended up with this css rules.

if your minimum value is negative you need the css min() function like this

margin-right: min(0vw, calc(-270px + (0 - -270) * ((100vw - 320px) / (900 - 320))))

if your minimum value is positive you need the css max() function like this

margin-right: max(0vw, calc(270px + (0 - 270) * ((100vw - 320px) / (900 - 320))))

CSS3 Calc() returning negative value

Well my guess is that your parent(s) are not having 100% height.

Eg html, body { height: 100%; } and perhaps other children that may be parents of the "overlay" (if any).

I am not sure tho, nor that I had any experience with negative value, just a guess.

Other than that, I don't see why it would return negative value.

---

Here's example of html and body being parents of that .overlay.

Example 1

And here's example of html, body and .another-parent being parents of that .overlay.

Example 2

Keep in mind that I used position: relative on .overlay in both examples as assumption. Although overlays are mostlikely suppoused to be absolute or fixed - hence they won't depend on parent(s) height.

Using negative CSS Custom Properties

As of this posting, March 2018, the only way to use negative custom properties is by multiplying it by -1 with the calc function.

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}

SCSS: Inverting/Negating Variable Based on calc()

Since calc is not a usual value you cannot simply append a - sign on it to obtain the negative value.

An idea would be to consider another parameter to control the sign. Here is an idea using pure CSS and CSS variable without the need of another calc()

.box {  margin-top: calc( var(--s,1)*(40px + 1rem));  height:100px;  background:rgba(255,0,0,0.5);}

<div class="box"></div><div class="box" style="--s:-1"></div>

---

Related Topics