HTML image bottom alignment inside DIV container
Set the parent div as position:relative
and the inner element to position:absolute; bottom:0
This is your code: http://jsfiddle.net/WSFnX/
Using display: table-cell
is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?
To fix the space at the bottom, add vertical-align: bottom
to the actual img
s:
http://jsfiddle.net/WSFnX/1/
Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?
So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/