使两个divs浮动:一个在另一个下面

I don't know how to better express my title so I'll explain here. I got a HTML/CSS page with 3 divs.

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

The first one, div.presentation, has no floating rule. I want to make menus at its right.

第一个，div.presentation，没有浮动规则。我想在它的右边做菜单。

So I got two others divs, div.login and div.categories. They both have float: right; and clear: both;.

所以我得到了另外两个div, div, login和div。它们都有浮点数;而清晰:,。

I want something like that :

我想要这样的东西:

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

But div.login and div.categories are aside each other. Floating rules worked perfectly when div.categories did not exist.

但是div.login和div.categories概念分开。当类别不存在时，浮动规则是完美的。

I have what I want when I put a <div style="height:100px"></div> between div.login and div.categories, but I'm sure we can do better. It's too based on luck.

当我在div.login和div.categories之间放置

时，我得到了我想要的，但是我相信我们可以做得更好。这太靠运气了。

Those 3 divs are display:inline-block.

这三个div是显示:内线块。

Any idea ? Thanks a lot.

任何想法?非常感谢。

EDIT http://jsfiddle.net/7nJp9/1/

编辑http://jsfiddle.net/7nJp9/1/

3 个解决方案

#1

I've modified your css:

我已经修改你的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;

}

#2

html

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

css

.left { 
  float: left; 
}
.right { 
  float: right; 
}

#3

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

Try dis one

试着说一

#1