Deux divs flottant l'un sur l'autre

Question

J'essaye de placer deux divs du côté droit du parent div l'un au-dessus de l'autre. Quelque chose comme ceci:

div#top 
|-------------------------------------||------------| 
|div#parent       ||div#menu | 
|       |---------|||float:right | 
|       |div#up |||   | 
|       |   |||   | 
|       |---------|||------------| 
|          | 
|       |---------|| 
|       |div#down || 
|       |   || 
|       |---------|| 
|-------------------------------------| 

Des idées comment le faire en utilisant css? Je ne peux pas utiliser les tables ici parce que div # up est ajouté dans la page maître (ASP.NET) et div # down est ajouté dans le contenu. Div # parent est liquide avec un ensemble de min-width et contient du contenu qui ne devrait pas être chevauché par ces divs donc je pense que la position: absolute est hors de question ici aussi. Un détail de plus: à gauche et à droite de div # parent, il y avait des divs flottants à gauche et à droite avec des menus. Donc, ajouter clair: gauche/droite à div # float à droite le met sous l'un de ces menus ...

Answer 1

Vous devez vous assurer que le bloc parent (#parent dans votre cas) devient le contexte de mise en forme de bloc du divs #up et #down, de sorte que toute compensation ne se produit que dans ce contexte de mise en forme de bloc et ne tient pas compte des flotteurs extérieur de cela. La manière la plus simple de le faire est généralement de laisser flotter #parent ou de lui donner un overflow autre que visible.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Voici une preuve, que je l'ai eu droit cette fois-ci: http://jsfiddle.net/Pagqx/

Désolé pour la confusion.

Answer 2

Personnellement, je voudrais les envelopper dans un conteneur div, et lui donner une largeur et flotter à droite.

#sidebar{ 
    width: 250px; 
    float: right; 
} 

Answer 3

Vous devez utiliser à la fois float:right et clear:right, qui assure que le côté droit de l'élément est libre au bord de l'élément contenant.

<div id="parent" style="width: 80%"> 

    <div id="up" style="float: right; clear: both;">div with id 'up'</div> 
    <div id="down" style="float: right; clear: both;">div with id 'down'</div> 
    'parent' div 

</div>