This is my first no-tables design and I'm not very far at all but I have read a lot of tutorials and information on it.. so be gentle.

I'm trying to make a header to a page which has a background repeating image, left-aligned text and right aligned image (to sit in the upper right corner of the page). The image is as tall as the header so that isn't a biggie but the text then sits in the upper left corner of the page. I want it to sit either centered or at the bottom of the header. I've tried using the vertical-align parts in many different combinations, using text-bottom, bottom, middle, etc but nothing seems to work. Here's the bare code I've got so far:


width: 100%;
margin: 0;
padding: 0;
background-image: url(images/topbg.gif);
font: 16px;
font-weight: bold;

#banner img{


<div id="banner">
<img src="/images/logout_off.gif" />

Any ideas?
Thanks in advance!