title: Automatically adjusting the width of right container on window resize
body: <p>In my template, wrapper div hold another two container. One is fixed position left div , and another one is absolute position right div. Right div contain another child div with width 100%. </p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id ="wrapper"&gt;
    &lt;div class="left"&gt;&lt;/div&gt;
    &lt;div class="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>     #wrapper {position:absolute; width:100%; height:100%;background:red;}
   .left {float:left; position:fixed; width:150px; height:100%;background:green;}
  .right {position:absolute; width:350px; height:100%; margin-left:150px;background:blue;}
  </code></pre>
  
  <p>My target here is the <code>right</code> container. I want to adjust width of this <code>right div</code> on window re-size ,so its width remains (view-port width - left div width).</p>
  
  <p>I tried it with jquery:</p>
  
  <pre><code>var right_width_prcnt = (($(window).width()- 150)/($(window).width()/100) )
  
  function right_width_adjust() {
           $('.right').stop(false,true).animate({'width':right_width_prcnt + '%'});
  };
  
  var resizeTimer = null;
  $(window).bind('resize', function() {
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(right_width_adjust, 100);
  });
  </code></pre>
  
  <p>Jsfiddle for reference :<a href="http://jsfiddle.net/RWDQ2/2/" rel="nofollow">http://jsfiddle.net/RWDQ2/2/</a></p>
  
  <p>Is there any css method (without jquery) to adjust width of right div = (window width -left div width)  at all the time whenever we re-size window</p>