IE 6 windows doubles left margin when object floated

So I have this div set inside another div. I want the interior div to float:left, with a left margin of 12 pixels. Simple right.

Well it seems in IE 6 on my windoze machine, floating the inerior div left causes the left hand margin to be doubled. Here’s the code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>
<head>
<title>Untitled</title>
<style type=“text/css”>
#test1 {
width: 770px;
background: #DDDDDD;
}
#test2 {
float: left;
width: 456px;
background: #DDDDDD;
margin-left: 12px;
background: #CCCCCC;
}
</style>
</head>
<body>
<div id=“test1”>
<div id=“test2”></div>
</div>
</body>
</html>

Anyone seen this before, anyone know away around it without hacks or conditional comments?