positionnement de trois divs avec css

Question

Qui aime les énigmes? ;)

J'ai trois divs:

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

Comment définirais-je les styles CSS (sans toucher le code HTML) pour avoir le menu-div dans la colonne de gauche, le login-div dans la colonne de droite et le content-div également dans la colonne de droite mais en dessous du login- div.

La largeur de chaque div est fixe, mais la hauteur ne l’est pas.

Answer 1

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

Pourquoi cette façon? Le menu arrivant en dernier dans le balisage rend la tâche difficile. Vous pouvez également être en mesure de définir le droit de contenu et de connexion de manière flottante, en ajoutant un libellé clair: droit au contenu, mais je pense que cela pourrait être votre meilleur choix. Sans voir la situation dans son ensemble, il est difficile de donner une solution qui fonctionnera dans votre cas.

---

EDIT: Cela semble fonctionner aussi bien:

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

---

Plus de réflexions: le positionnement absolu ne fonctionnera pas (ou ne fonctionnera pas bien) si vous voulez avoir les colonnes dans une disposition centrée. Le float semble fonctionner - tant que vous pouvez obtenir des conditions de type bordure-entre-colonnes identiques avec la solution float, vous feriez mieux de choisir cela. Encore une fois, si le site est supposé rester aligné, je pense que la méthode absolue fonctionnerait très bien pour vos besoins.

Answer 2

S'éloigne ... pas parfait. La réponse de Chris semble être une meilleure solution.

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