Collapsing Height of Div Elements with Floating Children

The height of a container that contains at least one child with the float: left|right; attribute applied to it will collapse to 0px in all browsers. There are several workarounds this property, but here I list the one that I have used and seems to be the easiest without affecting the HTML and inserting junk elements.

HTML

<div class="container">
	<div class="left">
		Left content.
	</div>
	<div class="right">
		Right content.
	</div>
</div>

CSS

.container {
	overflow: auto;
}

.left {
	float: left;
}

.right {
	float: left;
}

By simply adding the overflow: auto; attribute to the container div, the height will be calculated correctly and the container element will no longer collapse.