Question

i came across this page CSS LINK
i could’t help but love the idea of that to calculate the outcome of different units…
however i tried this :

$('selector').css({'width':'calc(100%-20px)'});

but it doesn’t work… anyone has any ideas how this works , or why doesn’t this work?

Answer 1

jQuery does not support the calc() value, and neither does any of the current browsers.

See a comparison here: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

In your example, yo can just use margins on the inner element instead:

<div class="parent"><div class="elem"></div></div>

.parent{
    width:100%;
    background:green;
}
.elem{
    margin: 0 10px;
    background:blue;
}

This way, .elem will be 100% – 20px wide.