Alinear contenidos de div en la parte inferior

Question

Tengo un div que contiene 2 párrafos. Quiero que los párrafos estén alineados en la parte inferior derecha del div. Pude alinear los paragramas usando text-align: right, pero estoy luchando para que los paragramas se alineen con la parte inferior del div.

El marcado es bastante simple:

<div> 
    <p>content 1</p> 
    <p>content 2</p> 
</div> 

CSS:

div{ 
    border: 1px red solid; 
    height: 100px; 
} 

p{ 
    text-align: right; 
} 

Intenté usar position:absolute en los paragrams y el establecimiento de bottom: 0, pero esto hace que los párrafos se solapan entre sí debido a la posición absoluta .

El div no abarca toda la página, por lo que el texto del párrafo debe estar dentro del div.

¿Hay alguna manera de lograr el efecto de modo que el contenido "crezca desde abajo"?

El efecto que quiero es así (photoshopped):

Y un violín de lo anterior: http://jsfiddle.net/cbY6h/

Answer 1

HTML

<div class="box"> 
    <div class="content"> 
     <p>content 1</p> 
     <p>content 2</p> 
    </div> 
</div>​​​​​​​​​​​​​​​​​​​​​ 

CSS

.box { 
    border: 1px red solid; 
    height: 100px; 
    position: relative; 
} 

.content { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

Will coloque el contenido en el botto m esquina derecha de la div. Puede ver el resultado en http://jsfiddle.net/cbY6h/1/.

Answer 2

Use relative en lugar de absolute para la posición de .content.

Answer 3

Una nota clave para entender. Si tuviera que cambiar la altura de la "caja" al 100% en lugar de 100px, entonces no funcionaría. Si la altura no se especifica como una unidad de medida específica, no se puede determinar cómo colocar el elemento hijo absoluto.

.box { 
border: 1px red solid; 
height: 100%; 
position: relative; 
} 

Answer 4

Estaba buscando algo similar, y terminé usando el diseño de flexbox.

Dada la siguiente estructura

<div> 
    <p>content 1</p> 
    <p>another</p> 
    <p>content 2</p> 
</div> 

y este estilo

div { 
    border: 1px red solid; 
    height: 100px; 

    display: flex; 

    //align items from top to bottom 
    //[I've always thought the opposite, as rows are counted from top to bottom 
    //and columns are counted left to right. Any one have an explanation for this?] 
    flex-direction: column; 

    //main axis align to the bottom, since we are using column for direction 
    justify-content: flex-end; 

} 

p { 
    //cross axis align towards the right. total outcome => bottom right 
    align-self: flex-end; 
} 

Va a obtener el diseño de la imagen.

Editar: No funcionará en los navegadores más antiguos (http://caniuse.com/flexbox). Puede clave del renovador

.flexbox .rest-of-your-selector { rule }