posicionando tres divs con css

Question

¿A quién le gustan los enigmas? ;)

Tengo tres divs:

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

¿Cómo definiría los estilos CSS (sin tocar el HTML) para que tenga el menú-div como la columna izquierda, el inicio de sesión en la columna derecha y el contenido-div también en la columna derecha pero debajo del inicio de sesión? div.

El ancho de cada div es fijo, pero la altura no lo es.

Answer 1

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

¿Por qué de esta manera? El menú que viene último en el marcado lo hace difícil. También puede flotar tanto el contenido como el inicio de sesión, y agregó un claro: derecho al contenido, pero creo que esta podría ser su mejor opción. Sin ver el panorama completo, es difícil dar una solución que definitivamente funcione en su caso.

---

EDITAR: Esto parece funcionar también:

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

---

Más pensamientos: el posicionamiento absoluto no funcionará (o no funcionará bien) si desea tener las columnas en un diseño centrado. El flotador parece funcionar; siempre que pueda cumplir con los requisitos de tipo de borde entre columnas para obtener una solución de flotador, es mejor que lo elija. Entonces, nuevamente, si se supone que el sitio se debe dejar alineado, creo que el método absoluto funcionaría muy bien para sus necesidades.

Answer 2

Flota lejos ... no es perfecto. La respuesta de Chris parece una solución mejor.

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