How to perform arithmetic operations in CSS?

Question

I want to know how can I achieve an arithmetic operation in CSS.

For example: I want to align two divs side by side each having width of 50% and I want to give border on these divs. I want to write my rule like this.

#container {
    width: 50% - 1px; // I know this does not work.
}

Why do browsers not support such arithmetic operations in CSS ?

And, How can I get this to work ?

question from:https://stackoverflow.com/questions/16160806/how-to-perform-arithmetic-operations-in-css

Answer 1

It already exists; You can use the CSS3 calc() notation:

div {
    background: olive;
    height: 200px;
    width: 200px;
}

div > div {
    background: azure;
    height: calc(100% - 10px);
    width: 100px;
}

http://jsfiddle.net/NejMF/

^{Note: It's only supported in modern browsers (IE9+) and has only recently been adopted by mobile browsers.}