title: How to make a div's width stretch between two divs
body: <p>My current problem is that I have three div elements; one floated left, one floated right, and one between those two.  I want the center div to automatically stretch to the max width of the width available between the two divs.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="contain"&gt;
      &lt;div id="left"&gt;1&lt;/div&gt;
      &lt;div id="filler"&gt;&lt;/div&gt;
      &lt;div id="right"&gt;2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#left {
      text-decoration: none;
      display: inline-block;
      float: left;
      width: auto;
      padding: 0px 20px 0px 20px;
      height: 45px;
      text-align: center;
      line-height: 300%;
      background: #FF9000;
      color: #FFFFFF;
  }
  #navFiller {
      display: inline-block;
      position: fixed;
      float: left;
      width: auto;
      height: 45px;
      background: #FF9000;
  }
  #right {
      text-decoration: none;
      display: inline-block;
      float: right;
      width: auto;
      padding: 0px 20px 0px 20px;
      height: 45px;
      text-align: center;
      line-height: 300%;
      background: #FF9000;
      color: #FFFFFF;
  }
  #contain {
      width: 100%;
      height: 45px;
      padding: 0;
      margin: 0;
      display: inline;
  }
  </code></pre>
  
  <p>Jsfiddle of project:</p>
  
  <p><a href="http://jsfiddle.net/msEBU/" rel="noreferrer">http://jsfiddle.net/msEBU/</a></p>