title: How do I fix this simple CSS floating issue in IE?
body: <p>I've got four <code>div</code> elements floated to the left. The third <code>div</code> is cleared.<br />
  In Firefox and Chrome the elements are positioned as expected: The first and second <code>div</code>s are adjacent to each other and are above the third and fourth <code>div</code>s which are also adjacent to each other.<br />
  IE7 on the other hand places the fourth <code>div</code> adjacent to the first and second <code>div</code>s with the third <code>div</code> below.</p>
  <p>I know I can fix it by adding a <code>br</code> element after the second <code>div</code> but I'd rather not edit the markup if I don't have to. Is there a more elegant way of fixing the problem?</p>
  <p>I've been trying to Google for a fix for a while now but haven't found one, which is rather surprising considering how elementary the problem seems. Perhaps I'm missing something obvious, is there a reference site that lists simple CSS issues like this one or am I just ignorant about basic CSS?</p>
  <p><strong>Edit:</strong> I've made the sample code slightly more complex after Nazgulled &quot;solved&quot; the problem (see the comments). There are now four <code>div</code>s instead of three and the third <code>div</code> is cleared instead of the second.</p>
  <p>Here is the complete source code:</p>
  <pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
      &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &gt;
      &lt;head runat=&quot;server&quot;&gt;
          &lt;title&gt;IE Float Test&lt;/title&gt;
          &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=utf-8&quot; /&gt;
          &lt;style type=&quot;text/css&quot;&gt;
              div
              {
                  width: 100px;
                  height: 100px;
                  color: white;
                  font-size: 3em;
                  float: left;
              }
  
              #divone
              {
                  background-color: red;
              }
  
              #divtwo
              {
                  background-color: blue;
              }
  
              #divthree
              {
                  background-color: green;
                  clear: both;
              }
  
              #divfour
              {
                  background-color: purple;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;divone&quot;&gt;one&lt;/div&gt;
          &lt;div id=&quot;divtwo&quot;&gt;two&lt;/div&gt;
          &lt;div id=&quot;divthree&quot;&gt;three&lt;/div&gt;
          &lt;div id=&quot;divfour&quot;&gt;four&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here is what is looks like in Chrome:<br />
  <a href="https://i.stack.imgur.com/W8p9e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W8p9e.png" alt="Chrome sample" /></a></p>
  
  <p>Here is what is looks like in IE7:<br />
  <a href="https://i.stack.imgur.com/gsc6Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsc6Y.png" alt="IE Sample" /></a></p>