title: CSS Div 100% with float:left
body: <p>Agrh, CSS - the bane of my life.  Can someone help out here?</p>
  
  <p>I'm trying to get the following div layout:</p>
  
  <pre><code>*******************************************************************************
  *aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
  *aaaaaaaaaa bbbbbbbbbbbb ccccccccccccccccccccccccccccccccccccccccccccccccccccc*
  *******************************************************************************
  </code></pre>
  
  <p>Currently my styles look like this:</p>
  
  <pre><code>#container {
  height:50px;
  }
  
  #a {
  float:left;
  width:50px;
  height:50px;
  }
  
  #b {
  float:left;
  width:50px;
  height:50px;
  }
  
  #c {
  float:left;
  width:100%;
  height:50px;
  }
  
  &lt;div id="container"&gt;
     &lt;div id="a" /&gt;
     &lt;div id="b" /&gt;
     &lt;div id="c" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this is causing the following to happen (div c drops below the others):</p>
  
  <pre><code>********************************************************************************
  *aaaaaaaaaa bbbbbbbbbbbb                                                       *
  *aaaaaaaaaa bbbbbbbbbbbb                                                       *
  *cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
  *cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc*
  ********************************************************************************
  </code></pre>
  
  <p>What needs to change to fix this?  Thanks.</p>
  
  <hr>
  
  <p><strong>Additional info:</strong></p>
  
  <ul>
  <li><p>a and b must have fixed pixel widths.</p></li>
  <li><p>This is a simplified example - in reality the divs have borders which must not overlap.</p></li>
  </ul>