Making 2 divs float:right with one under the other

Question

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

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

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

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.

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.

Those 3 divs are display:inline-block.

Any idea ? Thanks a lot.

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

Rent

Why not just put the login and categories div in one div and float that div right? – Sheriff

Hey Jason can u plz share ur jsfiddle link?? – Expressage

When I do that, login and categories div are overlapped. – Rent

I meant, apply the float stuff to the new div and remove them from the original two divs. – Sheriff

That's what I did but they still vertically overlapped. jsfiddle.net/7nJp9/1 (Thanks Ankit, I forgot !) – Rent

I've modified your css code from the jsfiddle and posted as an answer below. I've commented the areas I've modified. Biggest one was the position absolute. – Sheriff

Answer 1

I've modified your 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;
}

Sheriff

Oh, so I needed to remove position:absolute and add a margin-top: O, thanks a lot it works ! – Rent

Answer 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; 
}

Diestock

It works even without the float:left, but now my login and categories div are vertically overlapped ! Check out jsfiddle.net/7nJp9/1 Thanks for trying to help – Rent

Add min-height: 130px; to div.login and toy with the height – Diestock

I belive putting all of the elements you want to float somewhere in a parrent element is a batter solution, ie your sollution. The other tricks are basically hacks withc will end up breaking the CSS at some point and you wouldn't know where to start looking. – Vassallo

Answer 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 this one

Expressage