DIV interior bloqueado en la esquina inferior derecha de DIV exterior

Question

Dado el siguiente código HTML

<div style="width: 500px; height: 500px; border: 1px solid red;"> 
    <div style="width: 200px; height: 100px; border: 1px solid green; float: right; vertical-align: bottom;"> 
    </div> 
</div> 

Me gustaría que el div interior para bloquear en la esquina inferior derecha de la div exterior. ¿Qué necesito hacer CSS sabio para hacer que eso suceda?

Gracias! John

Answer 1

position es su amigo

<div style="width: 500px; height: 500px; border: 1px solid red; position: relative"> 
    <div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;"> 
    </div> 
</div> 

Answer 2

<div style="position:relative; width: 500px; height: 500px; border: 1px solid red;"> 
    <div style="position:absolute;right:0px;bottom:0px;width: 200px; height: 100px; border: 1px solid green;"> 
    </div> 
</div> 

Inténtelo. Versión corta: posición: relativa en el div externo, posición: absoluta en el div interno y dígale que quiere que el div interno tenga 0 píxeles desde los bordes derecho e inferior del contenedor principal.