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 ?

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.}

Answer 2

Use box-sizing: border-box; on your <div> to make borders part of the width calculation. The default value for box-sizing is content-box, which does not include padding or border in the width attribute.

#container {   border: 1px solid black;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box;   width: 50%; } 

Paul Irish comments on the use of calc() and suggests using border-box because it better matches our mental model of "width".