Question

Is there a way to combine percentage with pixels in css?
For example, I want a div width to be 50% + 10px.

Javascript / Jquery plugin are acceptable solutions.
But something that work globally, and not require to write additional code for any additional block.

Answer 1

This is a ‘hard’ problem in CSS, that only recently has any fix. The fix in CSS is to use the calc method, as demoed here:

http://dabblet.com/gist/3966215

Be aware that dabblet adds vendor prefixes automatically, so you need to use:

-webkit-calc()
-moz-calc()
-ms-calc()
-o-calc()
calc()

Browser support is OKish, http://caniuse.com/#search=calc – in short it’s IE9 and up, and not in Opera.

As far as I know there isn’t any polyfill in JS to make this work in older browsers.