Due div flottanti uno sopra l'altro

Question

Sto provando a mettere due div sul lato destro del padre div uno sopra l'altro. Qualcosa del genere:

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

Qualche idea su come farlo utilizzando css? Non posso usare le tabelle qui perché il div # up è aggiunto nella pagina Master (ASP.NET) e il div # down è aggiunto nel contenuto. Il genitore di Div # è liquido con un set di min-width e contiene contenuti che non dovrebbero essere sovrapposti da questi div così penso la posizione: anche qui l'assoluto è fuori questione.

Un ulteriore dettaglio: a sinistra ea destra del genitore div #, le div ale fluttuano a sinistra ea destra con i menu. Quindi aggiungendo clear: left/right per div # down floated right lo mette sotto uno di questi menu ...

Answer 1

È necessario assicurarsi che il blocco genitore (#parent nel tuo caso) diventa il contesto di formattazione a blocchi del div #up e #down, in modo che qualsiasi compensazione avviene solo all'interno di quel contesto di formattazione a blocchi e ignora i galleggianti al di fuori di esso. Il modo più semplice per farlo in genere è lasciare che sia anche #parent float o dargli un overflow diverso da visible.

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

Ecco una prova, che ho capito bene questa volta: http://jsfiddle.net/Pagqx/

Ci scusiamo per la confusione.

Answer 2

Personalmente li avvolgerei in un contenitore div e dargli una larghezza e farlo galleggiare correttamente.

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

Answer 3

è necessario utilizzare sia float:right e clear:right, che assicura che il lato destro dell'elemento è libera al bordo dell'elemento di contenimento.

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