CSS定位問題（理解浮動保證金左/右/自動）

Question

它不會讓我張貼圖片，但在這裏它是，如果你能看到這一點：http://i49.photobucket.com/albums/f272/huntmur/DIV-QUES.gif

我認爲這將是更清晰，

D2，D3 D4 &是具有彼此相鄰並居中在任何時候都在屏幕上。（960像素）
                  D2-680px，D3-10px，D4-2 70px（全部三個一起&必須居中在屏幕上）

D1和D5必須根據屏幕寬度進行調整。

此外，如果用戶瀏覽器寬度大於1200px，D1 也將被使用。

伊夫只包括一個D5這裏爲中心的目的（因爲不幸的是我只在表的角度來思考
。D5不會真正被使用。）

爲了幫助您更好地瞭解，我有一個便籤應用我寫了，想要放在網站上。通常所有的筆記必須留在680格內，但如果他們的瀏覽器是1200px，我想 也允許他們將它們放在左欄（D1）中。所以我想做的事情（作爲一個解決方案）是用上面的代碼（960區域）來對三列進行對中......並且，如果瀏覽器寬度至少爲1200px。 [我的d1層寬的計算結果是（browserWidth-960/2）]。

<style> 
    BODY {margin:0px;padding:0px;}<BR> 
    #container {width:960px;margin-left:auto;padding:0px;margin-right:auto;height:60px;}<BR> 
    #dx {width:690px;}<BR> 
    #d2 {background-color:#ff0000;margin:0px;padding:0px;width:680px;height:60px;}<BR> 
    #d3 {background-olor:#00ff00;margin:0px;padding:0px;width:10px;height:60px;float:right;}<BR> 
    #d4 {background-color:#0000ff;margin:0px;padding:0px;width:270px;height:60px;float:right;}<BR> 
</style> 

<div id="container"><BR> 
    <div id="d4"><BR> 
    &nbsp;<BR> 
    </div><BR> 
    <div id="dx"><BR> 
     <div id="d3"><BR> 
     &nbsp;<BR> 
     </div><BR> 
     <div id="d2"><BR> 
     &nbsp;<BR> 
     </div><BR> 
    </div><BR> 

換句話說，我不能與960區的混亂（因爲這是該網站），但是如果他們的屏幕足夠寬，我也想讓他們把stickys上左側欄（D1）。

Answer 1

我不認爲這些想法是究竟是你想要什麼，但希望其中一個足夠接近。

思想＃2：http://jsfiddle.net/DXmLE/

HTML：

<div id="container"> 
    <div id="d1">d1</div> 
    <div id="d2">d2</div> 
    <div id="d3">d3</div> 
    <div id="d4">d4</div> 
    <div id="d5">&nbsp;</div> 
</div> 

CSS：

html, body { 
    margin: 0; 
    padding: 0 
} 
#container { 
    width: 100%; 
    display: table; 
    table-layout: fixed 
} 
#container > div { 
    display: table-cell; 
    height:60px 
} 
#d1, #d5 { 
    overflow: hidden 
} 
#d2 { 
    background-color: #f00; 
    width: 680px 
} 
#d3 { 
    background-color: #0f0; 
    width: 10px 
} 
#d4 { 
    background-color: #00f; 
    width: 270px; 
} 

思想＃1： http://jsfiddle.net/PnujB/

如果其中任何一個都可以接受，我會用相應的HTML/CSS更新我的答案。