How to subtract width in CSS?
For example:
width = 100% - 10px
I'm not talking about padding or margin.
Now with calc the solution will be :
width: calc(100% - 10px);
Calc
can be use with Addition, Subtraction, Multiplication, Division.
Additional note :
Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
Simple: you can't do this. You'll have to use some workaround.
Well, until CSS3 calc() is released in all major browsers, all you have to do is wrap one div with another and use some paddings-margins. OR, you can use some javascript, like counting the width of the screen and setting the width of a div accordingly.
You might be able to do this with SASS, if you're using a stack which supports it. I'm only aware of Ruby, but there might well be others.
SASS is CSS-style code which generates traditional CSS, you can use variables and so on.
The only way to achieve this is to construct your CSS using LessCSS or a similar tool and then process these files into generated CSS - you can't do it on the fly
Actually there is no such functionality. All you can do is:
width:auto;
margin-right: 10px;
which is not what you want.
Usually, one uses a dynamic approach, that generates code on the fly. For instance, in PHP, while writing the CSS part,
$width = $all - 10;
echo 'width:' . $width . 'px;';
box-sizing: border-box
to make padding be a part of (instead of in addition to) the width, you could usewidth: 100%
withpadding: 0 10px
.