Aligning to the bottom of an li?

Question

I want to do this without javascript.

I can't figure out how to make all li with class "item" align to the bottom of the div#recent. Basically, every li is 192px wide. The problem is that each product image is a different height, so if one is only 40px tall, the text is at a different position than the one next to it.

<div id="recent">
<h2>Recent Items</h2>
<ul>
    <li class="item">
        <img src="images/product1.png" />
        <a href="#">
            Product Name Here<br/>
            Brand Name Here
        </a>
        <p>$182.32</p>
    </li>
</ul>
</div>

Any ideas?

Answer 1

Have you tried using CSS? On your div, set vertical-align:bottom, and set line-height & height to the same value?

Answer 2

Wrap your images in there own container (like another div) and give that container a specific height.

<div id="recent"> 
<h2>Recent Items</h2> 
<ul> 
    <li class="item"> 
        <div class = "img_wrapper"><img src="images/product1.png" /></div>
        <a href="#"> 
            Product Name Here<br/> 
            Brand Name Here 
        </a> 
        <p>$182.32</p> 
    </li> 
</ul> 
</div> 

In your css, give .img_wrapper a height of 50px or whatever.