[ab13]

So I'm trying to make a 3 item list with the text rotated and aligned to the top. My text is rotated 90 degrees counter clockwise like it is suppose to but it aligns to the bottom or what would be the left side if it wasn't rotated. I want it to line up to the top with out absolute positioning. I've tried text-align to no avail. Any help would be appreciated.

Here is the html:

<div class="navbar" style="background-color:#900;margin-left:10px;"><a class="nav">Merchandise</a></div>
<div class="navbar" style="background-color:#090;"><a class="nav">Training Boards</a></div>
<div class="navbar" style="background-color:#009;"><a class="nav">Contact Us</a></div>

Here is the css I'm using:

.navbar {width: 40px;
	float: left;
	margin-left: 10px;
	padding-bottom: 500px;
}

.nav {display: block;
	position: relative;
	margin-top: 100px;
	white-space: nowrap;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: bottom right;
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

EDIT: Here's a link to a skeleton of it. http://home.ite.sfcollege.edu/~richa...ng/index2.html
I want the text aligned to the top of the colored bars. Also you might notice I'm using a bunch of padding to make the bars fill up space, any ideas to make this better would be great too. Thanks.