На одной странице моего сайта у меня есть таблица в правом столбце, которая слишком широка, и вместо того, чтобы показывать полосы прокрутки, IE помещает ее под содержимое в левом столбце. Я не могу найти решение для этого, потому что я не знаю, как описать, что происходит.
Вот код, который я использую для демонстрации проблемы:
<style>
#col1 { float: left; width:189px; font-size:8pt;}
#col3 { width: auto; margin: 0 0 0 191px; }
</style>
<body>
<div id="col1">
<div style="padding-top:30em;border:1px solid red">really tall</div>
</div>
<div id="col3">
<h1>title</h1>
<table border="1">
<tr>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
<td>aaaaaaaaaa</td><td>aaaaaaaaaa</td>
</tr>
</table>
</div>
</body>
А вот как это выглядит в IE:
Во всех других браузерах таблица a отображается под заголовком, и я получаю горизонтальную полосу прокрутки. Это то, что я ожидал, но по какой-то причине IE хочет очистить содержимое в col1. Я пытался применить ширину, число с плавающей точкой и т. Д., Но я не могу заставить IE поместить таблицу под заголовком без очистки содержимого col1.
Я предполагаю, что для этого есть какой-то взлом IE, но что это?