title: CSS: resize div width according to parents width
body: <p>Ok, I am basically building a fluid layout.
  My HTML is like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="box" id="left"&gt;Left&lt;/div&gt;
      &lt;div class="box" id="center"&gt;This text is long and can get longer&lt;/div&gt;
      &lt;div class="box" id="right"&gt;Right&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>#container{
      width: 100%;
  }
  .box{
      float: left;
  }
  #left, #right{
      width: 100px;
  }
  #center{
      width: auto; /* ? */
      overflow: hidden;
  }
  .clear{
      clear:both;
  }
  </code></pre>
  
  <p>What I need to know is how do I get the <code>#center</code> to re-size when <code>#container</code> is re-sized without the elements moving underneath each other.</p>