Positioning three divs with css

Question

Who likes puzzles?;)

I have three divs:

<div id="login" />
<div id="content" />  
<div id="menu" />  

How would I define CSS styles (without touching HTML) to have the menu-div as the left column as the column, the login-div in the right column, and the content-div also in the right column, cases.

The width of each div is fixed, but the height is not equal.

Answer 1

#menu {
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
#content, #login {
  margin-left:120px;
}

Why is that? The menu, the last in the markup, makes it tough. You can also swim with both the right to content and the rights of entry, and have added a clear right to the content, but I think this may be your best choice. Without seeing the bigger picture, it's hard to give a solution that will definitely work in your case.

---

EDIT: This also works:

#content, #login {
  float:right;
  clear:right
}

</" > : ( ), . , , - , - float, . , , , .

Answer 2

... . .

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