Keeping containers from collapsing: Float left/right vs overflow hidden

We’ve all seen this before:

[code=html]
<div id=”outer”>
<div style=”float: left; width: 50%;”>Left Col</div>
<div style=”float: left; width: 50%;”>Right Col</div>
</div>
[/code]

The inner divs will float left, but #outer will collapse. In the past I have used this technique to keep #outer from collapsing:

[CODE]
#outer {
float: left;
width: xx;
}
[/CODE]

It works fine, but what I end up with is a whole pile of nested block elements that are floating left/right to keep themselves from collapsing.

I’ve seen people use this technique before, and it seems to work fine:

[CODE]
#outer {
overflow: hidden;
}
[/CODE]

What do you guys think is the proper way to handle the situation? It comes up SO often that for years I used the former technique without even thinking about it.

Also in #CSS _↴