css - IE7 和 IE6 中浮动 div 的问题

Question

我在我的网站标题中浮动了两个元素，它们是<div id="twitter">和<div id ="navbar>，但是当我在 IE6 和 IE7 中查看它们时，外观会出现偏差。我相信我要么需要清除浮动元素，要么应用 clearfix，但我不确定在哪里。

这是 IE6 和 IE7 中问题的图像：

这是在现代浏览器中出现的理想结果。

这是网页的链接：http ://www.bestcastleintown.co.uk/pg/

CSS：

#twitter {
    background: red;
    float: right;
    height: 40px;
    margin-bottom: 40px;
    width: 200px;
}

#navbar {
    font-size: 2.2em;
    float:right;
}

HTML：

<div id="main_header">
    <div id="inner_main_header">
        <div>
            <div id="main_logo">
                <div class="home_page_logo left">
                    <a href="index.php"><img src="PG_awards_logo.gif"></a>
                </div>
            </div>
            <div>
                <div id ="twitter" class="padall">
                    Follow us
                </div>
                <div id ="navbar" class="right">
                    <ul class="nav NG">
                        <li>home</li>
                        <li>enter</li>
                        <li>categories</li>
                        <li>judging</li>
                        <li>sponsorship</li>
                        <li>contact</li>
                    </ul>   
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

#navbar将样式更改为：

#navbar{
    font-size: 2.2em;
    float: right;
    width: 60%;
    overflow: auto;
}

只需给出#navbar一些宽度和溢出而不是可见的。