title: Advantages of "float:left;" without its disadvantages
body: <p>I want to have the same result as this : <a href="http://jsfiddle.net/mageek/faDkw/" rel="nofollow">http://jsfiddle.net/mageek/faDkw/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="foo" &gt;Hello&lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  World!
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#foo
  {
      background-color:red;
      height:400px;
      float:left;
  }
  </code></pre>
  
  <p>But without all the <code>&lt;br /&gt;</code>, because the height could change.</p>
  
  <p>How can I do that?</p>