title: CSS floating div taking remaining width
body: <p>I can't seem to make this work and am considering using table for that now.</p>
  
  <p>I have a page with 3 main divs that are all on the same line (floats).
  I want the div in the middle (#pages) to take the remaining width since I can toggle() both of the sides divs.</p>
  
  <p>It looks like that :</p>
  
  <p><img src="https://i.stack.imgur.com/N4XTm.png" alt="enter image description here"></p>
  
  <p>jsfiddle here : <a href="http://jsfiddle.net/5n3rz/" rel="nofollow noreferrer">http://jsfiddle.net/5n3rz/</a></p>
  
  <p>Here's my code :</p>
  
  <pre><code>&lt;div id="project"&gt;
        &lt;ul&gt;
          &lt;li&gt;z&lt;/li&gt;
          &lt;li&gt;z&lt;/li&gt;
          &lt;li&gt;z&lt;/li&gt;
          &lt;li&gt;z&lt;/li&gt;
          &lt;li&gt;z&lt;/li&gt;
          &lt;li&gt;z&lt;/li&gt;    
        &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="minus"&gt;
      &lt;a href="#" class="close close_project"&gt;
          &lt;i class="fa fa-caret-left"&gt;&lt;/i&gt;
        &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="pages"&gt;
        &lt;textarea name="text" id="texta-pages" placeholder="your page"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;div class="minus"&gt;
        &lt;a href="#" class="close close_notes"&gt;
          &lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;
        &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="notes"&gt;
        &lt;textarea name="notes" id="texta-notes" placeholder="your notes"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's my current CSS :</p>
  
  <p>everything is height:100%</p>
  
  <pre><code>#project, .minus, #pages, #notes{
   height:100%;
   float:left;
  }
  #project{
   width:150px;
  }
  .minus{
   background-color:#CCC;
   width:20px;
  }
  #pages{
   min-width:calc((100% - 2*20px - 150px)/2);
  }
  #notes{
   width:calc((100% - 2*20px - 150px)/2);
  }
  </code></pre>
  
  <p>I use jQuery to toggle() the project on the left, and the notes on the right.
  I want the #pages part to take all the remaining width when I remove one or both divs on its side.</p>