title: List elements don't float in IE6
body: <p>I've seen this issue around the web a ridiculous amount of times, but all so far have been based around <code>&lt;li&gt;&lt;a&gt;Test&lt;/a&gt;&lt;/li&gt;</code> etc.</p>
  
  <p>What I'm trying to do, simply is:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="title"&gt;Test&lt;/li&gt;
  &lt;li&gt;Test2&lt;/li&gt; ** These should float together on the same line **
  &lt;li class="title clear"&gt;Test&lt;/li&gt; ** New Line **
  &lt;li&gt;Test2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This works fine for me on everything but IE6, in which puts the list elements on seperate lines.</p>
  
  <p>A jsFiddle of this can be found here: <a href="http://jsfiddle.net/pjWdg/" rel="nofollow">http://jsfiddle.net/pjWdg/</a></p>
  
  <p>Please view on IE6 to notice the error, every other browser works fine.</p>
  
  <p>I've tried:</p>
  
  <pre><code>ul, ul li {
      list-style: none;
      padding:0px;
      margin:0px;
  }
  
  .clear {
     clear: both;
  }
  
  li.title {
     width: 200px;
  }
  
  ul &gt; li {
      float: left;
  }
  </code></pre>
  
  <p>I've also tried:</p>
  
  <pre><code>ul &gt; li {
      display: inline;
  }
  </code></pre>
  
  <p>All to no success. Can anyone shed some light into how I can make this work? Thank you!</p>
  
  <p>** UPDATE **</p>
  
  <p>Now, after removing the > in the list style, I've got:</p>
  
  <p><a href="http://jsfiddle.net/pjWdg/1/" rel="nofollow">http://jsfiddle.net/pjWdg/1/</a></p>
  
  <p>You can still see this is wrong, with Test2 appearing next to Test3?</p>