CSS width subtraction

Question

How to subtract width in CSS?

For example:

width = 100% - 10px

I'm not talking about padding or margin.

Answer 1

this isn't possible - and was asked a thousand times before. please use the search before posting those questions.

Answer 2

Simple: you can't do this. You'll have to use some workaround.

Answer 3

Actually there is no such functionality. All you can do is:

width:auto;
margin-right: 10px;

what is not what you want.

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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;';