CSS Vertical Alignment

I have this code on a page...

<div id="nav-level1">
<img src="images/image.gif" width="84" height="24" border="0" />
<span class="level1"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Research</a>
| <a href="#">Industry</a> | <a href="#">Media</a> | <a href="#">Education</a>
| <a href="#">Enquiries</a></span>
</div>

Through CSS, the div has been given a height of 24. The span has had it's font size set to xx-small. Both the IMG and SPAN object are set to float left.

My problem is that I want the contents of SPAN to sit along the bottom edge of the DIV instead of along the top. I've tried vertical-align baseline for the DIV and SPAN but it had no effect.

Any ideas what the correct way to do this is?

vertical-align is for text alignment within one line, not within a block-level element. Here's a popular workaround, until W3C get this one standardized:

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Thanks for the link Adios. It gave me some new ideas but none successfully produced what I needed.

I've decided that's it's possible to DIV the page up differently to produce the effect I want rather than trying to vertically align an element.