posicionando três divs com css

Question

Quem gosta de enigmas? ;)

Eu tenho três divs:

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

Como eu definiria os estilos CSS (sem tocar o HTML) para ter o menu-div como a coluna da esquerda, o login-div na coluna da direita e o conteúdo de div também na coluna da direita, mas abaixo do login- div.

A largura de cada div é fixo, mas a altura não é.

Answer 1

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

Por este caminho? O menu vindo última na marcação faz com que seja difícil. Você também pode ser capaz de flutuar tanto o conteúdo e login direita, e acrescentou um claro: direito de conteúdo, mas acho que isso pode ser sua melhor aposta. Sem ver a foto maior, é difícil para dar uma solução que vai certamente funcionar no seu caso.

---

EDIT: Isso parece funcionar bem:

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

---

Mais pensamentos: O posicionamento absoluto não vai funcionar (ou não funcionam bem), se você quiser ter as colunas em um layout centrado. O flutuador parece trabalho - contanto que você pode obter todos os requisitos do tipo fronteira entre-colunas para arrasar com a solução float, você pode ser melhor escolher isso. Então, novamente, se o site é suposto ser Alinhar à esquerda, eu acho que o método absoluto iria funcionar muito bem para as suas necessidades.

Answer 2

flutua para longe ... não perfeito. resposta de Chris parece uma solução melhor.

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