I am trying to convert our website to css. I want to get away from tables and I want to code this the RIGHT way.
Here is the link to my work in progress: http://www.motorxtremes.com/adultatvs/aatvTemplate.html
Anyway, this is really the skeleton of things right now, so I know it doesn't look good. I will be making these lists into tabs later on. ANYWAY, the problem I am having right now, is with the second list. I want it to sit on the bottom of the header image. I can do this with some padding, but if a user wants to increase the size of the text, it messes up the layout.

How can I make the list sit at the bottom of the image.

Here is my CSS:

#container{
    margin:auto;
	width: 960px;
	}
	
#header{
	background:url(../images/logo_back.jpg);
	background-repeat:no-repeat; 
	height:100px; 
	width:960px;
}

.nav ul{
	margin:0;
	padding:0;
	list-style:none;
	}
	
.nav ul li{
	margin:0;
	padding:0 .2em;
	float:left;
	display:block;
	background-color:#666;
	}
	
.topnav{
	width:960px;
	overflow:auto;
	}

.topnav ul{
	margin:0;
	padding:0 .2em;
	list-style:none;
	}
	
.topnav ul li{
	margin:0;
	padding:0 .2em;
	float:right;
	display:block;
	background-color:#666;
	}

#rightColumn {
 float:left;
 padding: 10px;
 color: #333333;
 width:230px;
 background: #dcdcdc url(http://www.motorxtremes.com/images/shadow.png) repeat-x top left;
 }
 
 #content {
 float:left;
 padding:10px;
 width:690px;
 background: #ffffff url(http://www.motorxtremes.com/images/shadow.png) repeat-x top left;
 text-align:left;
 }

And the HTML:

<div id="container">

	<div class="topnav"><!--#include virtual="/ssi/companyLinks.txt"--></div>
	
	<div id="header"><div class="nav"><!--#include virtual="/ssi/productLinks.txt"--></div></div>
	
	
	
	
	<div id="content">asdfasdfasd</div>
	
	<div id="rightColumn">asdfawfasdf</div>
	
	
	


</div>

Thank you!!

PS - I am working on a mac, and I have no idea if this looks right in IE. Let me know if you can!

It's over too far to the right in IE (starts toward the middle of the image).

What you can do if you want is this:

#header {
     position:  relative;
}
#header .nav {
     position:  absolute;
     bottom:  0;
     left:  0;
}

I don't think there's another way to accomplish this since vertical-align: bottom isn't cross-browser compatible.

Your an angel! I was reading about a method like this but couldn't understand how it worked. (I still don't get how it works, but I am glad it works!) So I had no idea how to implement it into my code. You made my life so much easier!