title: IE float div wrapping
body: <p>I'm having a problem with floating divs and IE7. For example, the following HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'&gt;
    &lt;head&gt;
      &lt;title&gt;IE Float Test&lt;/title&gt;
      &lt;style&gt;
        .container {
          width: 200px;
          background: #ddd;
          overflow: hidden;
        }
        .item {
          float: left;
          padding: 5px;
          background: #eee;
          margin: 5px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="item"&gt;This is a item&lt;/div&gt;
        &lt;div class="item"&gt;This is another item&lt;/div&gt;
        &lt;div class="item"&gt;Last item&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Give's the following in chrome (plus other major browsers):</p>
  
  <p><img src="https://i.stack.imgur.com/8cOav.png" alt="Chrome Result"></p>
  
  <p>But, the following in IE7:</p>
  
  <p><img src="https://i.stack.imgur.com/NfyCa.png" alt="IE Result"></p>
  
  <p>How do I get IE7 to move the item div to the next vertical position if it is too wide?</p>
  
  <p>Many thanks, John.</p>