title: What methods of ‘clearfix’ can I use?
body: <p>I have the age-old problem of a <code>div</code> wrapping a two-column layout. My sidebar is floated, so my container <code>div</code> fails to wrap the content and sidebar.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
    &lt;div id="sidebar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There seem to be numerous methods of fixing the clear bug in Firefox:</p>
  
  <ul>
  <li><code>&lt;br clear="all"/&gt;</code></li>
  <li><code>overflow:auto</code></li>
  <li><code>overflow:hidden</code></li>
  </ul>
  
  <p>In my situation, the only one that seems to work correctly is the <code>&lt;br clear="all"/&gt;</code> solution, which is a little bit scruffy. <code>overflow:auto</code> gives me nasty scrollbars, and <code>overflow:hidden</code> must surely have side effects.
  Also, IE7 apparently shouldn't suffer from this problem due to its incorrect behaviour, but in my situation it's suffering the same as Firefox.</p>
  
  <p>Which method currently available to us is the most robust?</p>