Positionieren drei divs mit CSS

Question

Wer mag Rätsel? ;)

Ich habe drei divs:

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

Wie würde ich definiere die CSS-Stile (ohne den HTML-Code zu berühren), um den Menü-div wie die linke Spalte zu haben, den Login-div in der rechten Spalte und der Inhalt-div auch in der rechten Spalte, aber unterhalb der login- div.

Die Breite jedes div ist festgelegt, aber die Höhe ist es nicht.

Answer 1

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

Warum diese Art und Weise? Das Menü zuletzt im Markup kommen macht es hart. Sie könnten auch beiden Inhalte schwimmen können, und direkt anmelden und haben eine klar: Recht auf Inhalt, aber ich denke, das könnte Ihre beste Wette. Ohne das größere Bild zu sehen, ist es schwer, eine Lösung zu geben, die auf jeden Fall in Ihrem Fall funktionieren werden.

---

EDIT: Dies scheint auch zu funktionieren:

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

---

Weitere Gedanken: Die absolute Positionierung wird nicht funktionieren (oder wird auch nicht), wenn Sie die Spalten in einem zentrierten Layout haben wollen. Der Schwimmer scheint zu funktionieren - solange Sie eine bekommen Grenz zwischen Säulen Bedarfsart mit der Gleitkomma-Lösung pan out, könnten Sie besser dran Wahl sein, dass. Dann wieder, wenn die Site soll align gelassen werden, denke ich, dass die absolute Methode für Ihre Bedürfnisse sehr gut funktionieren würde.

Answer 2

Schwimmt weg ... nicht perfekt. Chris Antwort scheint eine bessere Lösung.

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