Why does the DIV in the following example overflow into the TD adjoining the parent TD in IE6?
<!DOCTYPE htm PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<head>
<title>test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="background-color: #eeeeee">
<div style="height: 100px; overflow: auto">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>header</th>
</tr>
<tr>
<td>aaaa</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
</table>
</div>
</td>
<td> </td>
<td valign="top">
test
</td>
</tr>
</table>
</body>
</html>