CSS Vertical Alignment of Image Problem

[thenexumman]

Hi, I have the following HTML:

<div id="name" style="background-color: red; float: none; height: 400px; vertical-align: bottom;">
<img src="images/logo.png" style="vertical-align: bottom;" alt="Logo Image" />
</div>

But, the image renders at the TOP of my div, not at the bottom. What am I doing wrong?

Thanks very much for your help, it'll be very gratefully received indeed.

[ray326]

That doesn't apply between a block container and the inline content. It applies to the relative alignment of the image to the rest of the inline content that is its peerage. Try putting that image into a paragraph then play with the vertical alignment to see what I'm saying.

[BrettNooyen]

Try the following:


<div id="name" style="background-color: red; float: none; height: 400px; position: relative;">
<img src="images/logo.png" style="position: absolute; bottom: 0px" alt="Logo Image" />
</div>

[Centauri]

Or ....
<div id="name" style="background: red url(images/logo.png) no-repeat bottom; float: none; height: 400px;">
</div>