CSS - screensize minus constant

Question

Is it possible somehow to calculate size of an element as a basic mathematical expression? e.g.:

.wideColumn{max-width:100%-20em;} /*not working*/

JSW189 · Accepted Answer · 2013-02-08T12:19:59.707

1

This can be accomplished using LESS or jQuery. But unfortunately it cannot be done with pure CSS.

There are, however, workarounds to this issue using pure CSS. For example:

.wideColumn {
    max-width: 100%;
    margin-right: 10em;
    margin-left: 10em;
}

Of course, this example may not work with your code. But there are numerous other workarounds.

edited Feb 08 '13 at 12:19

answered Feb 08 '13 at 12:12

JSW189

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

Short answer is NO you cannot, not atleast in CSS 2, 2.1 spec, then too if you are interested you could take a look at Dynamic stylesheets with LESS

Or as Sandeep told, you can use calc() which is introduced in CSS3 spec

edited May 23 '17 at 12:04

Community

answered Feb 08 '13 at 12:11

Mr. Alien

Right, try less or javascript. – soyuka Feb 08 '13 at 12:11
1

There is a **calc** property – sandeep Feb 08 '13 at 12:12
@sandeep that was something new, edited my answer, thanks ;) – Mr. Alien Feb 08 '13 at 12:15

score 0 · Answer 3 · answered Feb 08 '13 at 12:12

0

You cannot do this in CSS directly, but try something like LESS - http://lesscss.org/

answered Feb 08 '13 at 12:12

Gareth Cornish

score 0 · Answer 4 · answered Feb 08 '13 at 12:13

0

it might be available one day, but not now - read more here http://www.w3.org/Style/CSS/specs#math

answered Feb 08 '13 at 12:13

pwolaq

4 Answers4