另一个CSS重叠问题

Question

更新：这是jsFiddle。

我希望它看起来像这样：

......但看起来像这样：

#container是水平居中的，必须保持这种状态。似乎无法做到这一点......

Answer 1

当你将盒子并排浮动，一个盒子向左，另一个盒子向右，两者都有width:50%时，会发生这种情况。但填充，边距和边框无意中增加了框的宽度，导致它们超过50％，并迫使右框在前一个框下移动。

尝试将静态宽度设置为方框（需要计算）

http://jsfiddle.net/fuYYv/

Answer 2

Bryan Downing在评论中给了我一个线索。

我添加了

footer #container {
    position: relative;
    top: -XXXpx;
}

完美的作品。非常感谢你的向导：）

这对其他人有用。 jsFiddle回答。代码如下：

header, #container, section, footer, footer img#iphone { display: block; }


header {
    background: url('images/header.jpg') repeat-x;
    height: 160px;

    border: 5px solid #aa3;
    color: #aa3;
}
    header img#logo {
        margin: 0 auto;
    }

#container {
    width: 550px;
    margin: 0 auto;

    overflow: hidden;

    border: 5px solid #33a;
    color: #33a;
}

section {
    float: left;    
    width: 310px;
    height: 200px;

    border: 5px solid #3a3;
    color: #3a3;
}

footer {
    background: url('images/footer.jpg') repeat-x;
    height: 150px;

    border: 5px solid #aa3;
    color: #aa3;
}
    footer #container {
        position: relative;
        top: -320px;
    }
    footer img#iphone {
        float: right;    
        height: 400px;
        width: 204px;

        border: 5px solid #a33;
        color: #a33;
    }