css - IE7 和 IE6 中的 float div 问题

Question

我在我网站的标题中 float 了两个元素，它们是 <div id="twitter">和 <div id ="navbar> ，但是当我在 IE6 和 IE7 中查看它们时，外观会出现偏差。我认为我要么需要清除 float 元素，要么应用 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 一些宽度和溢出，而不是可见的。