posicionar - selector de hijos css

¿Cómo hacer que un div se alinee con el lado derecho del padre manteniendo la posición vertical?

Question

Por favor refiérase a este práctico diagrama que dibujé:

La altura de div1 es desconocida. el ancho de div3 es fluido; nunca debe superponerse div2 . Tanto div1 como div2 tienen el mismo ancho y están centrados horizontalmente a través del margin: auto . ¿Cómo puedo colocar div3 para que se alinee con el lado derecho del body (sin importar qué tan ancho sea el body ) al compartir la posición vertical con div2 ? (Usando CSS)

Answer 1

¿Me gusta esto?

HTML:

<div id=''container''>
<div id=''first''>1</div>
<div id=''second''>2</div>
<div id=''third''>3</div>
</div>​

CSS:

#container{
width: 100px;
margin:0 auto;
}
#first{
border: 1px solid #ff55ff;
}
#second{
border: 1px solid #55ff77;
}
#third{
border: 1px solid #448855;
}
#first,
#second{
width: 50px;
clear:both;
float:left;
}
#third{
clear:none;
float: left;
}

En

Vea este violín: http://jsfiddle.net/zaNvR/1/

Answer 2

Una simple rejilla div haría el truco:

http://jsfiddle.net/NUGPv/

<div class="con">
<div class="lft">div 1</div>
<div class="rgt"></div>
</div>
<div>
<div class="lft">div 2</div>
<div class="rgt">div 3</div>
</div>​
.con { overflow:hidden; }
.lft { width:100px; height:100px; float:left; }
.rgt { width:100px; height:100px; float:left; }

Simplemente deje la celda superior derecha vacía.

Answer 3

.div1{
margin:0 auto;
width:100px;
height:50px;
border:5px solid #995555;
}
.div2{
width:100px;
margin:0 auto;
border:5px solid #aaaa55;
height:200px;
}
.div3{
float:right;
width:50px;
height:100px;
border:5px solid cyan;
}

<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>

Demostración también en http://jsfiddle.net/XjC9z/1/