css width: calc(100% -100px); alternative using jquery

Question

I'd like to use width: calc(100% -100px); which does the job perfectly for what I need it for, the only problem is its compatibility. At the moment it only works in the latest browsers and not at all in Safari.

Could I make an alternative using jQuery? ie. get the 100% width of an object -100px and then dynamically set the result as the CSS width (so it would be responsive)

Answer 1

If you have a browser that doesn't support the calc expression, it's not hard to mimic with jQuery:

$('#yourEl').css('width', '100%').css('width', '-=100px');

It's much easier to let jQuery handle the relative calculation than doing it yourself.