CSS position issue

I'm trying to position an image to the bottom of the table cell. The problem is that my knowledge of CSS is poor and I don't know what I'm doing wrong- no matter what I try I can't get it to act the way I want it to.

The page has variable height depending on the random banners that appear on the side (the whole page is inside a table, so their length stretches the table cell with the actual content). In a few selected pages the content is actually shorter than the shortest banner, so there's empty space between the bottom and the content. No matter what combinations I try (relative, absolute, static, inside a relative positioned div, making the table cell relative positioned, etc.) the image either clings to the last line of content, or completely detaches from the boundaries of the table cell. Here's my code (I took out the details of some tags to make it easier to read), can anyone show me how to do this?

Code:

<table align="center" border="0"> /*All the content is in a big table*/
	<td>
		/*Header stuff*/
		<div align="left" valign="bottom"><img><img><img></div>

		/*The table which contains the site content*/
		<table bgcolor="gray">
		<tr>
		/*menu*/
		<td valign="top" background="menu.png">
			<table border="0" width="112" background="deep.png">
			<tr><td>
				/*menu stuff*/
			</td></tr>
			</table>
		</td>
		/*The content, here's where I have the problem*/
		<td background="bg22.png" width="708 px" valign="top">
			<img src="barup.png" valign="top" />
			<img src="../1pixel.gif" width="708" height="14" />
			<img src="../1pixel.gif" align="left" height="300" width="16" /><img src="../1pixel.gif" align="right" height="300" width="16" />	

			<div align="center"><h1>Walkthrough</h1></div>
			<hr />
			Coming up. 																
			<img src="downbar.png" />/*THIS IS THE IMAGE I WANT AT THE BOTTOM*/
		</td>
		/*The banner area*/
		<td background="menu.png"  valign="top">
			<script language="JavaScript">
				showImage();
			</script>
		</td>
		</tr>
		</table>
		<br />
	</td>
	</table>

 

bleh, i dont know what im talking about.

 

Thank you that was very informative. Problem solved.

 

ok, should the "valign" variables in your problem section have "top" assigned to them?

 

What you should do is actually use CSS, not HTML formatting.
Get rid of your table design, and use CSS in combination with <div> tags.

Something like this to get you started:
I recommend w3schools.org as a source to learn CSS

Code:

#container { 
/* If you want a fixed width site, specify the width here */
width: 700px;
margin: 0 auto; width:
}

#header { text-align: center; }

#content h1 {
	text-align: center; 
}

#content span#content_footer {
	background-image: url('/downbar.png');
	background-repeat: no-repeat;
	display: block;
}

Code:

<div id="container">
	<div id="header">
		<!-- Header Stuff /-->
	</div>
	<div id="menu">
		<!-- Menu Stuff /-->
	</div>
	<div id="content">
	
	<h1>Walkthrough</h1>
	<hr />
	Coming up.
	<span id="content_footer"></span>
	</div>
</div>