另一個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/