HTML/CSS: Content Div slips down <p>i have a simple markup with a navigation <code>div</code>, a content <code>div</code> and a footer <code>div</code>. If I open my "page", everything seems okay. But if I open the page and then resize the browser window to e.g. 30%, then the <strong>content</strong> <code>div</code> slides down.</p> <p>It seems only to occur in internet explorer.</p> <p>The test markup:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="navi" style="float:left;width:197px;background-color:blue;"&gt; NaviContent &lt;br /&gt;&lt;br /&gt; more NaviContent &lt;/div&gt; &lt;div id="content" style="width:820px;background-color:yellow"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Content &lt;br /&gt;&lt;br /&gt; more ContentContent &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; more ContentContent &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; more ContentContent &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="footer" style="clear:both;"&gt; Footer Content &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Images of the problem:</p> <p>browser in 100% view: <a href="http://www.suckmypic.net/25729/1.png" rel="nofollow">http://www.suckmypic.net/25729/1.png</a></p> <p>browser window resized: <a href="http://www.suckmypic.net/25730/2.png" rel="nofollow">http://www.suckmypic.net/25730/2.png</a></p> <p><em>Please help</em></p>