Making 2 divs float:right with one under the other

css, floating, html

Solution

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

Problem

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/

Original source