Aligning image bottom of div

Question

I'm trying to format an image so it aligns to the bottom of a div. I put what I think is the relevant code in a fiddle: http://jsfiddle.net/5KEyD/

<div id="main">
<div style="display: inline-block; margin-left: 15px">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="Bottom-Text.png" alt="Some Image" width="800" height="152" /></div>    </div></div> 

#main{width:800px; height: 200px; padding-right:40px; overflow:hidden; background-    color: #c0c0c0;}
#imageWrapper { position: relative; height: 152px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0px; }  

What I need is for the image to align (centered) all the way at the bottom, with no extra grey space under it.

Thanks for any help!

Answer 1

<div style="width: 800px; margin: 0 auto;">
    <div id="imageWrapper">
        <img id="bottomImage" class="aligncenter" src="/wp-content/uploads/2014/05/Bottom-Text.png" alt="Some Image" width="800" height="152">
    </div>
</div>

Answer 2

I think that happens because of using display: inline-block for div element. Inline-block rule always adds 5px margins to element. So if you remove it the issue will be fixed . If you need that rule you can add -5px bottom margin .