title: How do you set a floating div's width to take up remaining space without pushing other divs down?
body: <p>For part of a layout I want to make, I want to use three divs, all floating next to each other. The Left and Right have a max-width set, which works fine, but I want the middle div to expand its width to fill the remaining space. To clarify, the left and right divs may have a width of anywhere from 0px to the max-width, depending on what is in each, and I want the middle div to expand its width so that it takes up the rest of the space not used by the divs on either side.</p>
  
  <p>The problem it's having now is that if there is a lot of content in the middle div, it's expanding and pushing the right div off to the next line instead of keeping it up with the other two.</p>
  
  <p>Here's the css I have so far:</p>
  
  <pre><code>#left-column {
   width: auto;
   max-width: 200px;
   height: auto;
   float: left;
  }
  
  #middle-column {
   float: left;
   width: auto;
  }
  
  #right-column {
   width: auto;
   max-width: 200px;
   height: auto;
   float: right;
  }
  </code></pre>
  
  <p>...and the HTML:<br>
      <code>&lt;div id="left-column"&gt;...&lt;/div&gt;<br>
      &lt;div id="middle-column"&gt;...&lt;/div&gt;<br>
      &lt;div id="right-column"&gt;...&lt;/div&gt;</code></p>
  
  <p>I think that this can be accomplished using a three-column, single-row table, but I absolutely do <strong>NOT</strong> want to use tables - I want to accomplish as much as possible by using pure css.</p>
  
  <p>Thanks!</p>