I have the age old problem of a div wrapping a 2 column layout. My sidebar is floated so my container div fails to wrap the content & sidebar.

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

There seem to be numerous methods of fixing the clear bug in FF:

<br clear="all"/>
overflow:auto
overflow:hidden

etc.

But in my situation, the only one that seems to work correctly is the <br clear="all"/> solution, which is a little bit scruffy. overflow:auto gives me nasty scrollbars, and overflow:hidden must surely have side effects. Also, apparently IE7 is supposed to not suffer from this problem due to its incorrect behaviour, but again, in my situation its suffering the same as FF.

Whats the most reliable/best practice method currently available to us?