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 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>
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>
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>
Attempt to use calc() in CSS does not work
line-height: calc(1.5 * (100vw - 50px));
try this and reduce the px according to your requirement.
Why does this calc() function not work in transform scale?
You have two issues. The first one is about the formula without scale:
calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))
This is invalid because you are adding a number
(0.75
) with a length
((0.3 - 0.75) * ((100vw - 320px) / (780 - 320))
)
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 .ref
The second issue, is that scale only take a number so you need to correct the formula to transform the second part into a number by removing any kind of unit (vw
,px
,etc).
Basically, what you want to do cannot be done this way because you have no way to convert your (100vw - 320px)
to a number unless you consider using some JS as this is beyond CSS. Even with JS you will need to define what is the logic behind transforming a pixel number to non-pixel number.
Using the same formula within right
and with percentage
will work fine because:
If percentages are accepted in the context in which the expression is placed, and they are defined to be relative to another type besides
<number>
, a<percentage-token>
is treated as that type. For example, in the width property, percentages have the<length>
type. A percentage only has the<percentage>
type if in that context<percentage>
values are not used-value compatible with any other type. If percentages are not normally allowed in place of the calc(), then a calc() expression containing percentages is invalid in that context.ref
So in this case percentage is allowed to be used with right
because we can resolve it thus the forumla will be valid because at the end it will be something like A% + Bpx
.
calc function in scss or css is not working
It looks like it should be this instead:
width: calc(100% -10px)
Which sets the width to 100% of its parent, minus 10 pixels.
Related Topics
How to Make the Items in the Last Row Consume Remaining Space in CSS Grid
How to Make a Div Unselectable
Gradients in Internet Explorer 9
Styling Google Maps Infowindow
How to Vertically Middle-Align Floating Elements of Unknown Heights
Is Background-Color:None Valid CSS
Svg in Img Element Proportions Not Respected in IE9
Are Parentheses Allowed in CSS Selectors
Fill Background Color Left to Right CSS
How to Change an Input Button Image Using Css
Content Url Does Not Display Image on Firefox Browser
How to Dynamically Add a Class to Manual Class Names
Bootstrap 3 - Disable Navbar Collapse
Match All Elements Having Class Name Starting With a Specific String