在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一些宽度和溢出而不是可见。