用css定位三個div

Question

誰喜歡謎語？ ;）

我有三個div的：

<div id="login" /> 
<div id="content" /> 
<div id="menu" /> 

我如何定義的CSS樣式（不接觸HTML）有菜單DIV左柱，登錄-DIV在右列content-div也在右欄但在login-div下面。

每個div的寬度是固定的，但高度不是。

Answer 1

#menu { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100px; 
} 
#content, #login { 
    margin-left:120px; 
} 

爲什麼這樣？標記中最後的菜單使其變得困難。您也可以同時浮動內容和登錄權限，並添加明確的內容權利，但我認爲這可能是您最好的選擇。如果沒有看到更大的圖景，很難提供一個解決方案，在你的情況下肯定會有效。

---

編輯：這似乎也工作：

#content, #login { 
    float:right; 
    clear:right 
} 

---

更多的想法：絕對定位是不行的（或將無法正常工作），如果你想在一箇中心的佈局列。浮動似乎工作 - 只要你可以得到任何邊界之間的類型的要求與泛解決方案氾濫，你可能會更好的選擇。然後，如果該網站應該保持對齊，我認爲絕對方法可以很好地滿足您的需求。

Answer 2

漂浮...不完美。 Chris's answer似乎是一個更好的解決方案。

#login { 
 
    float: right; 
 
    width: 400px; 
 
    border: 1px solid #f00; 
 
} 
 

 
#content { 
 
    clear: right; 
 
    float: right; 
 
    width: 400px; 
 
    border: 1px solid #f00; 
 
} 
 

 
#menu { 
 
    float: left; 
 
    width: 400px; 
 
    border: 1px solid #f00; 
 
}

<div id="login">Login</div> 
 
<div id="content">Content</div> 
 
<div id="menu">Menu</div>