Is it possible to do mathematics inside CSS?
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');
Should do what you are wanting. But you need to do something like this in javascript, you can't do it in pure CSS unless the widths for #accordian and .simpleColor are known in advance (and thus calculated in advance).
It is not possible to do mathematic operations inside CSS natively. You could use JavaScript to change CSS properties on page load, but this is a pain and must be done every page load making your page slow.
You'll need to use a CSS preprocessor like LESS, Stylus, or SASS.
The bonus to using either of these languages is that you can generate actual CSS stylesheets from them. You also get benefits like functions, mixins, variable, and more.
You can do maths in CSS e.g.:
height: calc(100% - 20%);
CSS will also handle the different units, so this works too:
height: calc(100% - 20px);
Additionally, min(), max() and clamp() have also been added allowing for calculations like this:
height: min(calc(100% - 20px), 50%);
- min(): gets the minimum value;
- max(): gets the maximum value; and
- clamp(): limits a value by providing an upper and lower bound.
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.