Align the contents of a div to the bottom

Question

I have a div containing 2 paragraphs. I want the paragraphs to be aligned in the lower right corner of the div. I was able to align the params with text-align: right , but I try my best to make the params align at the bottom of the div.

The markup is pretty 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 in the grams and the bottom: 0 setting, but this makes the paragraphs overlap with each other due to absolute positioning.

div does not cover the entire page, so the text of the paragraph should be laid out in a div.

Is there any way to achieve this effect so that the content "grows from below"?

The effect I want is similar to this (photoshop):

And the script 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; } 

Place the content in the lower right corner of the div. The result can be seen at http://jsfiddle.net/cbY6h/1/ .

Answer 2

I was looking for something similar, and ended up using the 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: will not work in older browsers ( http://caniuse.com/flexbox ). You can use the "Upgrade" keys

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

Answer 3

Key note to understand. If you changed the height of the box to 100% instead of 100 pixels, that would not work. Unless the height is specified as a specific unit of measure, it cannot figure out how to position an absolute child.

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

Answer 4

Use relative instead of absolute for the .content position.