Image positioned at bottom of column

Left hand column is dynamic, but need image to stay at bottom of column

[nigassma]

I want to place an image at the bottom of the left hand column of all of my pages. Pages expand with the size of the content. So I want the image to move with the size of the column.

Here's some simplified mark-up. I just want some ideas on the best way to get this task done.

<table>
<tr>
<td id="top"></td>
</tr>
</table>
<table>
<tr>
<td id="left><div id="test"><img src="blah.gif></div></td>
<td id="center></td>
<td id="right></td>
</tr>
</table>

How wrong is placing the image in a div that looks like this:

#test {position: relative; bottom: 0; margin: 0;}
and placing the div in the left hand column?

[benihana]

How wrong is placing the image in a div that looks like this:

#test {position: relative; bottom: 0; margin: 0;}

That would be ok, but you dont even need the <div>, you can just put the id directly on the image

<img src="blah.jpg" id="test">

:-)

[nigassma]

haha. you're right, now to test and see where it fails. :)

[nigassma]

Need help. It just plops itself at the top of the column.

[bedlam]

How wrong is placing the image in a div that looks like this:

#test {position: relative; bottom: 0; margin: 0;}

More or less completely wrong, given what you're trying to do ;-)

Relative positioning [w3.org] shifts the normal position of an element. So by setting 'bottom' to '0', you have instructed the browser to change the 'natural' position of the element by zero units.

Try changing the word 'relative' to 'absolute' (see absolute positioning [w3.org]) and see if the results are closer to what you expected.

-b