posizionando tre div con css

Question

A chi piacciono gli enigmi? ;)

Ho tre div:

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

Come definirei gli stili CSS (senza toccare l'HTML) per avere il div menu come colonna sinistra, il div login nella colonna destra e il div contenuto anche nella colonna destra ma sotto il login- div.

La larghezza di ogni div è fissa, ma l'altezza no.

Answer 1

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

Perché in questo modo? Il menu che arriva per ultimo nel markup lo rende difficile. Potresti anche essere in grado di fluttuare sia il contenuto che il login e aggiungere un chiaro: diritto al contenuto, ma penso che questa potrebbe essere la soluzione migliore. Senza vedere il quadro generale, è difficile dare una soluzione che sicuramente funzionerà nel tuo caso.

---

EDIT: sembra funzionare anche questo:

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

---

Altre considerazioni: il posizionamento assoluto non funzionerà (o non funzionerà bene) se si desidera avere le colonne in un layout centrato. Il float sembra funzionare - fintanto che è possibile ottenere qualsiasi tipo di confine tra colonne per eseguire il pan con la soluzione float, è meglio scegliere quello. Poi di nuovo, se il sito dovrebbe essere lasciato allineato, penso che il metodo assoluto funzionerebbe molto bene per le tue esigenze.

Answer 2

Galleggia via ... non perfetto. La risposta di Chris sembra una soluzione migliore.

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