Aligning text to bottom

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!


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

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>

hope that helps.

1 Like

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.

1 Like

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.