Q:

jquery CSS calc() function

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?

A:

jQuery supports the calc(). I have used this so many times:

$(".content-section").css('width','calc('+contentSectionWidth+'% - 15px)');
$(".content-section").css('width','calc(100% - 15px)');

A:

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.

