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

Question

Let's say we have a container that is centered in the viewport ...

.centered{margin: 0 auto; width:960px;}

... and inside that container I have another that needs to have a width of 100% the viewport width. I could set the margin to ...

.widest{margin: 0 -480px}

... for example. The thing is that the value won't be -480px, but actually the viewport width (960px) - the .centered width / 2 ... all good and easy with calc(), only I need a result that is a negative value.

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

I've tried subtracting the lot from 0 to get a negative value, but no go.

I don't want to use JS and I only have issues in Webkit - not with the calc() though - my problem is that if I hack it into submission by doing ...

.widest{
  margin: 0 -100%;
}

... my page scrolls horisontally in Chrome/Safari.

Your thoughts?

Answer 1

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);
}

Answer 2

EDIT: A simpler trick than previous ones: calc(0px - something) - with an unit - works while calc(0 - something) doesn't. See Fiddle 3

These "tricks" work:

calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */

where 0 - something didn't (at least with your example).

Fiddle 1
Fiddle 2

Answer 3

I have another possible solution. You can devide by -2, so you'll get a negative Result

.widest{
  margin-left: calc( (100vw - 960px) / -2 );
}

Answer 4

You could try next solution

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}