用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>