positionnement trois divs avec css

Question

Qui aime les devinettes? ;)

J'ai trois divs:

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

Comment puis-je définir les styles CSS (sans toucher le HTML) pour avoir le menu div comme la colonne de gauche, la connexion-div dans la colonne de droite et le contenu-div aussi dans la colonne de droite mais en dessous de la div-login.

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

Answer 1

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

Pourquoi cela? Le menu qui arrive en dernier dans le balisage rend les choses difficiles. Vous pourriez également être en mesure de flotter à la fois le contenu et la connexion à droite, et ajouté un clair: droit au contenu, mais je pense que cela pourrait être votre meilleur pari. Sans voir la situation dans son ensemble, il est difficile de trouver une solution qui fonctionnera dans votre cas.

---

EDIT: Cela semble fonctionner aussi bien:

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

---

Plus pensées: Le positionnement absolu ne fonctionne pas (ou ne fonctionne pas bien) si vous voulez avoir les colonnes dans une mise en page centrée . Le flotteur semble fonctionner - tant que vous pouvez obtenir toutes les exigences de type border-between-columns pour faire un panoramique avec la solution float, vous feriez mieux de choisir cela. Là encore, si le site est censé être aligné, je pense que la méthode absolue fonctionnerait très bien pour vos besoins. Flotte loin ... pas parfait.

Answer 2

Chris's answer 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>