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