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