title: float: left removing including div?
body: <p>I don't really understand what's going on here.</p>
  
  <p>This is my css and html</p>
  
  <pre><code>#content {
      -moz-border-radius:10px;
      background:#F0F0F0;
      width: 910px;
      margin: 0 auto;
      clear: both;
  }
  
  #content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  
  &lt;div id="content"&gt;
    &lt;ul&gt;
      &lt;li&gt;Foo&lt;/li&gt;
      &lt;li&gt;Bar&lt;/li&gt;
      &lt;li&gt;Baz&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I obtain a grey box containing the items aligned vertically. I want to align them horizontally, and I read I have to put <code>float: left</code> in the <code>#content ul</code> selector. If I do so, the grey div box disappears, and the three <code>li</code> entries stay vertical. If I put the float: left to a <code>#content ul li</code> selector, the entries are now horizontal, but still the enclosing box disappears.</p>
  
  <p>What am I missing ?</p>