Could this be an IE7 problem?

I have an outer div that is not floated. It has an inner div that is floated left. I have used <br style=“clear: both;”> to have the outer div contain the inner div. This is something I had read somewhere.

It works on Firefox, Chrome, but does not work for IE7. Is this a problem with IE7. If so what can I do to get around the problem. Thanks for your help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Test</title> 

</head> 
<body  > 
 
<div style="padding: 10px;margin: 20px;border: 1px dotted gray;"> 
    <div style="float:left;width: 100px;height: 60px;background: green;"> 
        yy
    </div> 
    <br style="clear: both;">
</div> 

</body> 
</html> 

Try with the .clearfix class http://www.webtoolkit.info/css-clearfix.html