div.container {
	border: 1px solid #000000;
	overflow: hidden;
	width: 100%;
}

div.left {
	width: 45%;
	float: left;
}

div.right {
	width: 45%;
	float: right;
}

http://www.quirksmode.org/css/clearing.html

Say you want a containing block with 2 floating elements to expand around the floating element, usually this wouldn't happen since the container has no height because the floating elements are out of the usual flow.

The method below fixes this problem.

CSS Float Clearing

css

CSS