Css 使两个div浮动：一个在另一个的正下方

我不知道如何更好地表达我的标题，所以我会在这里解释。我得到了一个带有3个div的HTML/CSS页面

第一个选项，

div.presentation

，没有浮动规则。我想在右边做菜单

所以我得到了另外两个div，

div.login

和

div.categories

。它们都有

float:right和
清除：两者都有

我想要这样的东西：

 --------------------------------------     ------------------
|div.presentation                      |   |div.login         |  
|                                      |   |                  |
|                                      |   |                  |
|                                      |   |                  |
|                                      |    ------------------
|                                      |
|                                      |    ------------------
|                                      |   |div.categories    |
|                                      |   |                  |
|                                      |   |                  |
|                                      |   |                  |
 --------------------------------------     ------------------

但是
div.login
和
div.categories
互不相关。当
div.categories
不存在时，浮动规则工作正常

当我在
div.login
和
div.categories
之间放置
时，我得到了我想要的，但我相信我们可以做得更好。这太靠运气了

这三个div是
display:inline block

有什么想法吗？非常感谢

编辑
HTML

<div class="left">
 <div class="presentation"></div>
</div>
<div class="right">
 <div class="login"></div>
 <div class="categories"></div>
</div>


我已经修改了你的css：

body {
  width: 90%;
  margin: auto;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  background: #e6f0ff;
}

header.beta {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  background: #fff7e0;
  opacity: 0.8;
  padding: 10px 50px;
  color: #444443;
}

header.logo {
  width: 90%;
  height: 125px;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 30px;
  border: 1px dotted grey;
}

nav.tabs {
  display: none;
}

div.presentation, div.login, div.categories {
  position: relative;
  margin-top: 10px;
  display: inline-block;
}

div.right {
  position: relative;
  float: right;
  width: 25%;
}

div.presentation {
  width: 70%;
  clear: both;
}

div.login, div.categories {
  width: 100%;
  clear: both;
}

div.login header, div.presentation header, div.categories header {
  font-size: 14px;
  background: #0a97e2;
  padding: 3px 15px;
  color: white;
  border-radius: 10px 10px 0 0; 
}

div.login section, div.presentation section, div.categories section {
  /*position: absolute;*/
  width: 100%;
  background: white;
  border-radius: 0 0 5px 5px;
}

div.login section p, div.presentation section p {
  /* changed this */
  margin: 0px 10px;
  padding: 3px 10px 3px 10px;
}

div.login section input {
  display: block;
  margin: auto;
  margin-bottom: 10px;
}

/* added this */
div.categories ul {
  margin: 0px 10px;
  padding: 3px 10px 3px 10px;
}

为什么不将login和categories div放在一个div中，并将其浮动到正确的div中呢？嘿，Jason，你可以共享你的jsidle链接吗？当我这样做时，login和categories div是重叠的。我的意思是，将浮动内容应用到新div中，并将它们从原来的两个div中删除。这就是我所做的，但它们仍然垂直重叠。（谢谢Ankit，我忘了！）即使没有浮动也可以工作：左，但现在我的登录和分类div垂直重叠了！感谢您尝试添加最小高度：130px；我相信把你想浮动的所有元素放在一个平行元素的某个地方是一个很好的解决方案，即你的解决方案。其他技巧基本上都是用C进行的黑客攻击，最终会在某个时候破坏CSS，你不知道从哪里开始寻找。哦，所以我需要删除position:absolute并添加一个margin top:O，非常感谢它的工作！
<div style="width:430px; height:430px; border:1px solid;">
    <div style="width:230px; height:100%; float:left; background:#000;"></div>
    <div style="width:180px; float:right; height:150px; border:1px solid;  margin-top:20px;  margin-right:10px;"></div>
    <div style="width:180px; float:right; height:150px; margin-top:20px; margin-right:10px; border:1px solid;"></div
</div>

body {
  width: 90%;
  margin: auto;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  background: #e6f0ff;
}

header.beta {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  background: #fff7e0;
  opacity: 0.8;
  padding: 10px 50px;
  color: #444443;
}

header.logo {
  width: 90%;
  height: 125px;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 30px;
  border: 1px dotted grey;
}

nav.tabs {
  display: none;
}

div.presentation, div.login, div.categories {
  position: relative;
  margin-top: 10px;
  display: inline-block;
}

div.right {
  position: relative;
  float: right;
  width: 25%;
}

div.presentation {
  width: 70%;
  clear: both;
}

div.login, div.categories {
  width: 100%;
  clear: both;
}

div.login header, div.presentation header, div.categories header {
  font-size: 14px;
  background: #0a97e2;
  padding: 3px 15px;
  color: white;
  border-radius: 10px 10px 0 0; 
}

div.login section, div.presentation section, div.categories section {
  /*position: absolute;*/
  width: 100%;
  background: white;
  border-radius: 0 0 5px 5px;
}

div.login section p, div.presentation section p {
  /* changed this */
  margin: 0px 10px;
  padding: 3px 10px 3px 10px;
}

div.login section input {
  display: block;
  margin: auto;
  margin-bottom: 10px;
}

/* added this */
div.categories ul {
  margin: 0px 10px;
  padding: 3px 10px 3px 10px;
}