how do 100% -100px with css and jquery

Question

I'm using the same code in css and jquery:

width: 100% -100px;

so, I use this code:

$(document).ready(function(){
    $('.left').css('width', '100%').css('width', '-=100px');
});

But it does not work properly when the browser is resized after loading the site will. I want working similar this code:

.left
{
    width: 80%; //100% -100px;
}
.right
{
    width: 20%; //100px;
}

Answer 1

UPDATE: Demo using jQuery

Option 1:

Using jQuery:

function resize_div(selector){
    var curr_width = selector.width(); // get the current width
    new_width = curr_width - 100;
    selector.css('width', new_width);
}

$(document).ready(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // then resize width on document ready
});
$(window).resize(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // resize width everytime the window is resized
});

HERE'S A DEMO

Option 2:

You can use css calc(), like:

/* Firefox */
width: -moz-calc(100% - 100px);
/* WebKit */
width: -webkit-calc(100% - 100px);
/* Opera */
width: -o-calc(100% - 100px);
/* Standard */
width: calc(100% - 100px);

Option 3:

using padding and box-sizing

.some-div
{
   padding-right: 50px;
   padding-left: 50px;
   width: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Answer 2

Solution using CSS2:

HTML

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.left {
    position: absolute;
    left: 0px;
    right: 100px;
    background-color: green;
}
.right {
    width: 100px;
    background-color: red;
    float: right;
}
.left, .right {
    height: 50px;
}

.container{
    position: relative;
}

Working Fiddle

In the above fiddle, I applied position: absolute to the .left container. This makes that container not to stretch the parent element (hence, the layout will break). If you are sure that .left container's height will be less than the .right container, then go with the above solution. or else if you know that .left container's height will be more than the .right container's height then go with this solution. Fiddle.

If you are unsure of the heights of those containers and you don't want to break the layout, then I think it is better to go with javascript. (no need of javascript, if you know any of the container's height)