CSS calc() not working
To quote MDN
The
+
and-
operators must always be surrounded by whitespace. The
operand ofcalc(50% -8px)
for instance will be parsed as a percentage
followed by a negative length, an invalid expression, while the
operand ofcalc(50% - 8px)
is a percentage followed by a minus sign
and a length. The*
and/
operators do not require whitespace, but
adding it for consistency is allowed, and recommended.
Space your stuff out, and it will probably work.
Why the CSS calc() function is not working?
You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc
as many as we want but they are equivalent to simple parentheses.
From the documentation:
Note: The
+
and-
operators must be surrounded by whitespace. For
instance,calc(50% -8px)
will be parsed as a percentage followed by a
negative length—an invalid expression—whilecalc(50% - 8px)
is a
percentage followed by a subtraction operator and a length. Likewise,calc(8px + -50%)
is treated as a length followed by an addition
operator and a negative percentage.The
*
and/
operators do not require whitespace, but adding it for
consistency is both allowed and recommended.Note: It is permitted to nest
calc()
functions, in which case the
inner ones are treated as simple parentheses.
.one {
background: red;
width: calc(100% - 150px);
margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
height: calc(100px - 10px);
padding: calc(5% + 10px) calc(5% - 5px);
}
<div class="one">
</div>
Why is CSS calc(100%-250px) not working?
It's because you have to put a space between the +
or -
operator in order for it to work properly.
div { background-color: blue; height: 50px; width: calc(100% - 250px);}
<div></div>
CSS calc() function doesn't seem to work correctly
You need spaces in your calc()
declaration:
calc(50vw - 150px)
not calc(50vw-150px)
EG:
@media (max-width: 999px) { #containerProgressbarPageLoad { background:red; position: relative; margin-left: calc(50vw - 150px); margin-right: calc(50vw - 150px); }}
<div id="containerProgressbarPageLoad">containerProgressbarPageLoad</div>
Why doesn't css-calc() work when using 0 inside the equation?
The first equation is invalid because it will lead to calc(-10px + 0)
Note: Because
<number-token>
s are always interpreted as<number>
s or<integer>
s, "unitless 0"<length>
s aren’t supported incalc()
. That is, width:calc(0 + 5px);
is invalid, even though both width: 0; and width: 5px; are valid. ref
And if the result was non-zero you will fall into this:
At + or -, check that both sides have the same type, or that one side is a
<number>
and the other is an<integer>
. If both sides are the same type, resolve to that type. If one side is a<number>
and the other is an<integer>
, resolve to<number>
.
The last one is more logical since 10px + 5
has no meaning whearas we may think that 10px + 0
is simply 10px
but for the browser it's not.
Related question: Why doesn't min() (or max()) work with unitless 0?
CSS3 calc() function not working correctly
You need to know that between inline
and inline-block
elements, the spaces matters. So if you have a whitespace between two inline elements, it takes account in the total calculation. To avoid this there are a lot of tricks, but the simplest is the following:
.containero {
font-size: 0;
}
Add this property in your CSS and it works. Working example:
.containero { font-size: 0; width: 100%; background-color: yellow; display: inline-block; box-sizing:border-box;}
.noey, .yeso { border: 1px solid red; width: 30px; height: 30px; text-align: center; vertical-align: middle; display:inline-block; color: red; padding:0px; box-sizing:border-box;
}
.inpoot { height: 31px; margin: 0 5px; display:inline-block; width: calc(100% - 70px); box-sizing:border-box;}
<div class="containero"> <button class="noey">No</button> <input class="inpoot" /> <button class="yeso">Yes</button></div>
CSS calc function does not center
You can use margin:auto;
for adding space from both side. And you need to set it 100% - 28px
.container-card { background-color: grey; height: 500px; } .container-holder { background-color: gold; width: calc(100% - 28px); height: 300px; margin: auto; }
<div class="container-card"> <div class="container-holder">
</div> </div>
CSS calc() function
You cannot divide by units, only by numbers.
CSS3 calc(100%-88px) not working in Chrome
The problem in the question was caused by the lack of space around the subtraction operator.
Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.
https://www.w3.org/TR/css3-values/#calc-syntax
This article mentions that the spacing is necessary for unambiguous parsing.
Bad: calc(100%-88px)
Good: calc(100% - 88px)
How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.
A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.
2022 Update - calc()
is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.
Related Topics
Internet Explorer @Font-Face Is Failing
Why Specify @Charset "Utf-8"; in Your CSS File
How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS
Set Google Maps Container Div Width and Height 100%
@Import in @If Statement in SASS
What Does It Mean When a CSS Rule Is Grayed Out in Chrome's Element Inspector
Css Animation and Display None
What Does an "&" Before a Pseudo Element in CSS Mean
Sub-Pixels Calculated and Rendered Differently Among Browsers
CSS @Font-Face - What Does "Src: Local('☺')" Mean
Aligning Two Divs Side-By-Side
Greyscale Background CSS Images
Differencebetween Align-Items VS. Align-Content in Grid Layout
How to Get the Scroll Bar with CSS Overflow on iOS
IE7 Relative/Absolute Positioning Bug with Dynamically Modified Page Content
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7