Align contents of div to the bottom

Question

I have a div containing 2 paragraphs. I want the paragraphs to be aligned to the bottom right of the div. I was able to align the paragrams using text-align: right, but I am struggling with trying to get the paragrams to align to the bottom of the div.

The markup is quite simple:

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

CSS:

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

p{
    text-align: right;
}

I tried using position:absolute on the paragrams and setting bottom: 0, but this makes the paragraphs overlap each other due to the absolute positioning.

The div does not span the whole page, so the paragraph text should be contrained within the div.

Is there a way to achieve the effect such that the content "grows from the bottom"?

The effect I want is like this (photoshopped):

And a fiddle of the above: 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 place the content in the bottom right hand corner of the div. You can see the result at http://jsfiddle.net/cbY6h/1/.

Answer 2

I was looking for something similar, and ended up using flexbox layout.

Given the following structure

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

and this style

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

You will get the layout from the picture.

Edit: Won't work on older browsers (http://caniuse.com/flexbox). You can key of Modernizer

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

Answer 3

A key note to understand. If you were to change the height of the "box" to 100% instead of 100px, then it would not work. If height is not specified as a specific unit of measure it can't figure out how to place the absolute child item.

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

Answer 4

Use relative instead of absolute for position of .content.