帮助,IE7抢劫了我的divs,现在他们正在屏幕上跑!

Question

我的网站http://hivechatter.com/对于Firefox,Chrome,IE8来说非常性感,你可以这么说:

但接下来的是IE7,它将她的div很糟糕,以至于他们几乎跑掉了屏幕!无论出于何种原因,div中的内容都集中在一起.到底发生了什么事？这似乎与IE7解释左边的方式有关:百分比边距,但我无法弄清楚.

为了方便和后人的缘故,下面是我的CSS的相关部分,删除了文本格式和其他废话.#container是整个页面容器,#blue_box是主要内容框,#left和#right是蓝色框中的列,#diviv是分隔它们的白线,#links是在#blue_box下面悬停的浅蓝色导航.

#background {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: no-repeat #222933;
    overflow: hidden;
}    

#container {
    position: relative;
    left: 34%;
    top: 10%;
    width: 50%;
    min-width: 450px;
    max-width: 700px;
    overflow: auto;
    padding: 0;
}

#blue_box {
    position: relative; /* so that divider has appropriate height */
    width: 94%;
    padding: 3%;
    overflow: auto; /*needed so that div stretches with child divs*/
}

#left {
    position: relative;
    float: left;
    width: 44%;
    margin: 0;
    padding: 0;
}

#right {
    position: relative;
    float: right;
    width: 49%;
    margin: 0;
    padding: 0;
}     

#divider{
    position:absolute;
    left:49%;
    top:6%;
    bottom:6%;
    border-left:1px solid white;
}

#links {
    float: right;
    width: 16em;
    overflow: auto;
}

Answer 1

将容器CSS的相对位置更改为绝对值.

你的问题是你的形象就在那里,容器跟着它相对定位.