Align Div Text Bottom

Question

For someone reason I can't get this div's text to vertically align to the bottom I've tried just about everything except for solutions involving extensive code.

.products {
width: 191.25px;
height: 191.25px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px;
background: black;
color: white;
float: left;
text-align: right;
}

<h2>Header Two</h2>
<div class="products">Content for  class "products" Goes Here</div>
<div class="products">Content for  class "products" Goes Here</div>
<div class="products">Content for  class "products" Goes Here</div>
<div class="products">Content for  class "products" Goes Here</div>

If someone could help me fix my code so to vertically align the div's text to the bottom.

EDIT: I have tried the following:

Adding to .product

display: table-cell;
vertical-align: bottom;

Answer 1

Wrap the content in an absolutely positioned span tag. Then set the div to position relative. You can then use the bottom property of the span to adjust its height within the div.

HTML

<h2>Header Two</h2>
<div class="products"><span>Content for  class "products" Goes Here</span></div>
<div class="products"><span>Content for  class "products" Goes Here</span></div>
<div class="products"><span>Content for  class "products" Goes Here</span></div>
<div class="products"><span>Content for  class "products" Goes Here</span></div>

CSS

.products {
width: 191.25px;
height: 191.25px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px;
background: black;
color: white;
float: left;
text-align: right;
position:relative; /** Added **/
}

/** New Style **/
.products span{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 15px;    
}

Working Example http://jsfiddle.net/wD4yJ/

Answer 2

what about giving the text another div?

I have modified your layout a little bit

<h2>Header Two</h2>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>

And the have added these roles in additional to yours:

.products {
display: table;
}
.inner{
display: table-cell;
vertical-align: bottom;
}

Answer 3

In order to align the text to the bottom you will need a separate class for the text itself. I would suggest to put the text on a paragraph tag and position in the div wherever you want.

Working Example Here

<div class="products">
    <p class="bottom">Content for class "products" Goes Here</p>
</div>