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/