Dos divs flotantes uno encima del otro

Question

Estoy tratando de poner dos divs en el lado derecho de los padres div uno encima del otro. Algo como esto:

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

¿Alguna idea de cómo hacerlo usando css? No puedo usar tablas aquí porque div # up se agrega en la página Master (ASP.NET) y div # down se agrega en el contenido. Div # parent es líquido con algunos min-width establecidos y contiene contenido que no debe ser superpuesto por estos divs así que creo que la posición: absolute está fuera de cuestión aquí también.

Un detalle más: a la izquierda ya la derecha del div # padres no divs ale flotaban a izquierda y derecha con los menús. Entonces, agregar clear: left/right a div # down flotado a la derecha lo pone debajo de uno de estos menús ...

Answer 1

usted necesita para asegurarse de que el bloque padre (#parent en su caso) se convierte en el contexto de formato de bloque de la divs #up y #down, por lo que cualquier compensación sólo ocurre dentro de ese contexto de formato de bloque y hace caso omiso de los flotadores fuera de eso La manera más fácil de hacer esto generalmente es dejar #parent flotar, también, o darle un overflow que no sea visible.

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

Aquí alguna prueba, que lo tengo bien esta vez: http://jsfiddle.net/Pagqx/

Lo siento por la confusión.

Answer 2

Personalmente los envolvería en un contenedor div, le daría un ancho y lo dejaría flotar.

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

Answer 3

Es necesario utilizar tanto float:right y clear:right, que asegura que el lado derecho del elemento es sin obstáculos hasta el borde del elemento contenedor.

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