title: Floating divs within li not displaying correctly in IE
body: <p>I have an unordered list with list items that contain divs that I need to have a <code>max-width</code> on:</p>
  
  <pre><code>&lt;div&gt;Some content
      &lt;ul class="myUl"&gt;
          &lt;li&gt;
              &lt;div class="dynContent"&gt;Some&lt;/div&gt;&lt;div class="dynContent"&gt;dynamic&lt;/div&gt;&lt;div class="dynContent"&gt;content&lt;/div&gt;&lt;span&gt;Test 1&lt;/span&gt;&lt;div class="clearFix"&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="dynContent"&gt;blah blah blah blah blah blah blah&lt;/div&gt;&lt;div class="dynContent"&gt;more&lt;/div&gt;&lt;div class="dynContent"&gt;blah&lt;/div&gt;&lt;span&gt;Test 2&lt;/span&gt;&lt;div class="clearFix"&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="dynContent"&gt;testing&lt;/div&gt;&lt;div class="dynContent"&gt;3&lt;/div&gt;&lt;div class="dynContent"&gt;2&lt;/div&gt;&lt;span&gt;Test 3&lt;/span&gt;&lt;div class="clearFix"&gt;&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.dynContent
  {
      float: left;
      font-size: 13px;
      cursor: default;
      padding: 1px 3px 1px 3px;
      border: 1px solid #C5DBEC;
      margin: 1px 3px 0px 3px;
      max-width: 100px;
      white-space:nowrap;
      overflow:hidden;
  }
  .clearFix
  {
      clear:both;
  }
  </code></pre>
  
  <p>This works perfectly in FF and Chrome, but big surprise it doesn't work in IE 8. In IE 8 the list markers are displaying at the spot where I have the div with the class of <code>clearFix</code>.</p>
  
  <p><a href="http://jsfiddle.net/uh3Rj/" rel="nofollow">jsfiddle link</a></p>