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更新我的答案。