Zwei divs floating right one über anderen

Question

Ich versuche, zwei divs auf der rechten Seite der Eltern div übereinander zu setzen. Etwas wie dieses:

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

Irgendwelche Ideen, wie man es mit css tut? Ich kann hier keine Tabellen verwenden, da div # up auf der Masterseite (ASP.NET) hinzugefügt wurde und div # down im Inhalt hinzugefügt wurde. Div # parent ist liquid mit etwas min-width set und enthält Inhalt, der nicht von diesen divs überlappt werden sollte, also denke ich, dass position: absolute auch hier nicht in Frage kommt.

Noch ein Detail: links und rechts von div # parent schwammen Ale-Divs links und rechts mit Menüs. So fügen Sie klar: links/rechts nach div # nach unten schwebte rechts legt es unter einem dieser Menüs ...

Answer 1

Sie müssen sicherstellen, dass die Mutterblock (#parent in Ihrem Fall) Kontext des divs der Block Formatierung wird #up und #down, so dass jede Lichtung innerhalb dieses Blocks Formatierungskontext geschieht nur, und ignoriert die außerhalb Schwimmer davon. Der einfachste Weg, dies zu tun ist normalerweise, entweder #parent float zu lassen, oder geben Sie eine andere overflow als visible.

Sorry für die Verwirrung http://jsfiddle.net/Pagqx/:

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

Hier einige Beweise, dass ich es vor, diese Zeit.

Answer 2

Ich persönlich würde sie in einem Container div, und geben Sie ihm eine Breite und schweben Sie es richtig.

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

Answer 3

Sie müssen sowohl float:right und clear:right, verwendet werden, die gewährleistet, dass die rechte Seite des Elements zu dem Rand des umschließenden Elements frei ist.

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