CODEWITHSUNDEEP
css
Jeaf Gilbert
Jeaf Gilbert

Reputation: 11991

CSS width subtraction

How to subtract width in CSS?

For example:

width = 100% - 10px

I'm not talking about padding or margin.

Upvotes: 39

Views: 44882

Answers (7)

mpgn
mpgn

Reputation: 7251

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.

Upvotes: 46

Thariama
Thariama

Reputation: 50832

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

width:auto;
margin-right: 10px;

which is not what you want.

Upvotes: 2

Déjà vu
Déjà vu

Reputation: 28850

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

Upvotes: 1

Grant Crofton
Grant Crofton

Reputation: 9099

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.

Upvotes: 3

n1313
n1313

Reputation: 21391

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.

Upvotes: 12

Nev Stokes
Nev Stokes

Reputation: 9799

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

Upvotes: 2

Peter
Peter

Reputation: 132307

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

Upvotes: 11

Related Questions