另一个CSS重叠问题

Question

更新：这是一个jsFiddle。

我希望它看起来像这样：

...但它看起来是这样的：

的#container的水平居中，且必须保持如此。似乎无法得到这个权利...

Answer 1

布莱恩唐宁在评论中给了我一个线索。

我加

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; 
    } 

Answer 2

这种情况发生时，你并排浮箱，一个箱子左侧，另一个右侧，都有width:50%。但填充，边距和边框无意中增加了框的宽度，导致它们超过50％，并强制右边的框在前面的框下移动。

尝试静态幅度设定在箱子上（需要计算）

http://jsfiddle.net/fuYYv/