Given an element with an id of wrapper, the styles needed to easy clear any contained floats is:

#wrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#wrapper {
	zoom: 1;
}

The :after selector deals with most modern browsers, so Firefox, Safari, Opera (the ones listed as Grade A browsers in Yahoo!’s Graded Browser Support chart). Internet Explorer 6 and 7 ignore this rule, so the second stylerule, the zoom: 1 triggers hasLayout in IE6 and 7 which does the self-clearing of floats.

If valid CSS is an absolute and non-negotiable requirement, then zoom: 1 is going to be a problem. So instead you could replace the zoom:1 selector rule with another style-rule that triggers hasLayout in IE, like height: 0%, or overflow: hidden – pick your poison.