Aligning text to bottom

[sixrfan]

on the bottom of this page, in the “Other Products You May Like” section, i cannot figure out how to get the text to align to the bottom of the H4. that way the Polishes and Humidifiers should be on the second half of their height, just above the images. please advise. thanks in advance!

[RyanReese]

Hey.

You could remove the float on “.relprod” and display:inline-block; it instead. Then just remove the height on “.relprod h4”.

[dresden_phoenix]

actually the should be simple. wrap .relprod in a container, display as table, an display each .relprod as a table cell, then you can add display:table-cell and vertical-align: bottom. BTW I would suggest you restructure the whole thing as a list and get rid of the H4s it would be simpler and more semantic.

consider doing something like this:

 .also{ padding: 0 ; margin:0 -10px; list-style: none; display:table; width: 100%;  table-layout: fixed ; border-collapse:  separate; border-spacing: 10px 0;}
 .also li { display:table-cell; text-align: center; vertical-align: bottom; border:1px solid; padding: 5px}
 .also a{ display:block;}
 .also img { height:240px ; width: 125px; margin-top: 1em; }

<h3>Other products...</h3>
<ul class="also">
	<li><a href="#">Headline text</a><a href="#"><img src="X"></a></li>
	<li><a href="#">Headline text longer headline for wrap</a><a href="#"><img src="X"></a></li>
	<li><a href="#">Headline text</a><a href="#"><img src="X"></a></li>
	<li><a href="#">Headline text</a><a href="#"><img src="X"></a></li>
</ul>

hope that helps.

[RyanReese]

@dresden_phoenix

actually the should be simple. wrap .relprod in a container, display as table, an display each .relprod as a table cell, then you can add display:table-cell and vertical-align: bottom.

I did notice that but he does have the last box wrap, which I didn’t want to change. Also if he adds more boxes there, the space is already squished so I kept the inline-block capability so he can add more.

[sixrfan]

thanks to both. i’ve implemented Ryan’s technique and it seems to be working. i appreciate you both.