title: CSS: Make a div fill remaining space on right-hand side, without inner content overflowing
body: <p>I have a fixed-width left div, and I want to make the right div fill the remaining space. </p>
  
  <p>So far I've been <a href="https://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space-a-very-simple-but-annoyi">taking this approach recommended by another SO poster</a>, but it doesn't work if I have content inside the right div. </p>
  
  <p>The content in the right div is set to <code>width: 100%</code>, so I would expect it to be no wider than the right-hand div, but it overflows the right div.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id="left"&gt;left&lt;/div&gt;
    &lt;div id="right"&gt;right&lt;div id="insideright"&gt;overflows&lt;/div&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  #left {
      float:left;
      width:180px;
      background-color:#ff0000;
  }
  #right {
      width: 100%;
      background-color:#00FF00;
  }
  #insideright { 
      width: 100%; 
      background-color: blue; 
      height: 5px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>JSFiddle here, demoing the problem: <a href="http://jsfiddle.net/MHeqG/155/" rel="nofollow noreferrer">http://jsfiddle.net/MHeqG/155/</a></p>
  
  <p>What can I do? </p>
  
  <p>I want to support older IE browsers, so I'd rather not use <code>display: table-cell</code> etc if I can avoid it, or at least not without a reasonable fallback. </p>