title: Div width auto fit to screen/parent element
body: <p>I am sure this is simple but...</p>
  
  <p>I have the following:</p>
  
  <p><a href="http://jsfiddle.net/SUBH3/1/" rel="nofollow noreferrer">http://jsfiddle.net/SUBH3/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='wrapper'&gt;
      &lt;div id='panel1'&gt;&lt;/div&gt;
      &lt;div id='panel2'&gt;&lt;/div&gt;
      &lt;div id='panel3'&gt;gest&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper
  {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
  }
  #panel1
  {
      position:relative;
      top:0px;
      left:0px;
      float:left;
      height:100%;
      width:35px;
      background-color:blue;
  }
  
  #panel2
  {
      position:relative;
      top:0px;
      left:0px;
      float:left;
      height:100%;
      width:240px;
      background-color:red;
  }
  
  
  #panel3
  {
      position:relative;
      top:0px;
      left:0px;
      float:left;
      height:100%;
      background-color:green;
  }
  </code></pre>
  
  <p>What I want is to have the final green panel fill the rest of the space. I have tried a few things but cannot do it. I can use a table to achieve what I want, which is what I will probably do, I just want to know how I can do this with css?</p>
  
  <p>I have tried this with list elements too, but end up with the same problem.</p>