Image within a Div is upside down... Need to have it align bottom and "STAY" within DIV boundaries

Ladies and Gentlemen,

Here's my code....

<div id="graphic" style="z-index:0; height:90px; width:100px; vertical-align:bottom; border:thin #000000 outset;"><a onmouseover="return overlib('Graph displays amount of money used.<br><br><% if(ttlFnd.BOF && ttlFnd.EOF){ Response.Write("$ 0.00"); } else { Response.Write("Funds Used to Date: $" + ttlFnd.Fields.Item("amtUsed").Value);}%>');" onmouseout="return nd();"><img name="pctUsed" src="images/pctUsed.png" width="100" height="<% if(ttlFnd.BOF && ttlFnd.EOF){ Response.Write("0"); } else { Response.Write(((ttlFnd.Fields.Item("remBal").Value / ttlFnd.Fields.Item("total_funding").Value) * 100 ) - 10);}%>" /></a></div>

What I need is the IMG to align BOTTOM to the DIV.  It's appearing UPSIDE DOWN in the rendered page.  I know you can't v-align: bottom an IMG since it doesn't work. Any thoughts please.

It doesn't matter that I'm using CLASSIC ASP with JAVASCRIPT. That's not the problem.  This is a CSS Issue.

The IMG file is 1px height and 100px width.  The height dynamically shrinks with the percentage of funds remaining.  So when there's 100% funds the IMG fills the DIV nicely. As the percentage gets smaller, the IMG starts to decrease. That's not happening. I'm getting the whitespace at the bottom of the DIV when it should be at the TOP of the DIV container.

Does that make sense?

Thanks,

Peter