CODEWITHSUNDEEP
htmlcssvertical-alignmenttext-alignment
barFooVar
barFooVar

Reputation: 65

Align Div Text Bottom

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;

Upvotes: 0

Views: 14323

Answers (3)

Thanos
Thanos

Reputation: 3059

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>

Upvotes: 0

Andrew Liu
Andrew Liu

Reputation: 2548

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

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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/

Upvotes: 3

Related Questions