在 Internet Explorer 中，中心 DIV 显示在页面底部答案

【问题标题】：Center DIV displays at bottom of page in Internet Explorer在 Internet Explorer 中，中心 DIV 显示在页面底部
【发布时间】：2012-06-04 11:57:50
【问题描述】：

我在 Internet Explorer 中的 div 出现问题。我有一个三列布局，它在除 Internet Explorer 之外的所有浏览器（chrome、firefox、safari）中都能正确显示。在 IE 中，中间 div 显示在页面底部而不是侧边栏之间。

我几天来一直在尝试找出问题所在。我确定这与我的 CSS 有关，但我不确定。

任何帮助将不胜感激！

我的网站是：http://www.onedirectionconnection.com

这是 CSS：

div#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 1125px;
    text-align: left;
}

div#header {
    clear: both;
    height: 500px;
    margin-top: 0px;
    padding: 0px;
    border: 0px
}

div#navi {
    text-align: center;
    background: #FFFFFF;
    clear: both;
    height: 60px
    margin-left: 13px;
    margin-right: 13px;
    margin-bottom: 10px;
    padding-left: 39px;
    border-bottom: 3px solid #FF0000;
    border-top: 3px solid #FF0000;
}

div#left {
    float: left;
    width: 320px;
}

div#right {
    float: right;
    width: 320px;
}

div#middle {
    padding: 0px 325px 5px 325px;
    margin: 0px;
}

我只包含了我认为与问题相关的部分，但如有必要，任何人都可以随时在我的网站上提供代码！

【问题讨论】：

标签： css internet-explorer

【解决方案1】：

增加容器的宽度或减少一些边距。

#middle
{
 padding: 0px 0px 5px 0px;
 margin: 0px;
 overflow: hidden;
 width: 485px;
 float: left;
}

【讨论】：

如何在不改变其他浏览器布局外观的情况下减少页边距？
我看到你没有错误的边距，但在这种情况下你应该改变你的风格，就像我在我的回答中展示的那样。

【解决方案2】：

您需要处理 DIV 的定位。左边的div没问题。在左 div 和右 div 之后添加中间 div。

在中间添加float: left; width: 400px; margin: 0;。并调整中间 DIV 子元素的宽度。

【讨论】：