javascript - Is it possible to do mathematics inside CSS?

Question

I have jquery accorion id #accordion and some of the content inside header class name .simpleColor. Now I want to give a calculated margin to .simpleColor. In pseudo...it looks something like this,

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

I am open to use any other technology such as javascript to achieve this if it is possible.

question from:https://stackoverflow.com/questions/10378292/is-it-possible-to-do-mathematics-inside-css

Answer 1

There's a CSS function called calc that is starting to get pretty good support. The syntax works as followed:

width: calc(50% - 100px);

(Note that the whitespace around the operators is significant)

This allows true dynamic computational support in CSS. With a preprocessor, you can only combine static lengths with static lengths, and relative lengths with relative ones.

At this point in time calc has achieved widespread support and should be safe to use unless you have specific needs for supporting legacy browsers.