title: Nested DIVs - How to make it work for Internet Explorer 7?
body: <p>Nested divs; works perfectly in Firefox-Opera-Safari, how to make it work for IE7?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;div id="test-div-two" style="border: 1px solid magenta; float:left; margin: 2px;"&gt;
      &lt;div style="height: 20px; background: rgb(232,238,224); margin: 2px;"&gt;
      Heading
      &lt;/div&gt;
      &lt;div id="test-div-two-content" style="border: 1px solid black; height: 100px; overflow-y: auto; background: white; margin: 2px;"&gt;
      Scrillable&amp;nbsp;content&amp;nbsp;blaa&lt;br/&gt;
      Scrillable content content content &lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content blaa&lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content &lt;br/&gt;
      Scrillable content
      &lt;/div&gt;
      &lt;div style="border: 1px solid red; background: rgb(238,238,238); margin: 2px;"&gt;
      &lt;img src="grippie.png" style="margin-left: auto; margin-right: auto; display: block;"/&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What I want: minimum width, that's why I use float. I am building a custom "drop down menu" and I don't want it to expand to the whole page and I want it to fit the longest string.</p>
  
  <p>In my own IE7 browser it stretches and fills the whole page. In all other browsers (FF,Safari,Opera, probably ie8) it works nicely and fits to "minimum width".</p>