bottom alignment with divs

I have a header div centered in the browser, which contains a div floated left and another div floated right.

I need the text in the logo div to align with the bottom of the list-menu div. I tried using margin-top, but it displays very differently in different browsers.

I also tried the vertical alignment property, but it didn't seem to work either. I have this css so far...

#header{
height:50px;
vertical-align:middle;
margin-top:50px;
position:relative;
}

#logo{
float:left;
}

#logo p{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#335366;
font-size:16pt;
font-weight:bold;
letter-spacing: -2px;
margin:0px;
padding:0px;
}

#list-menu{
/*padding-top:50px;
border-top:6px solid #D1DCE2;*/
float:right;
}

and the test for the logo div is still a little off... is there any way to just get that text to sit at the bottom of the header div no matter how big the text is?

example:

http://www.homecominc.com/test

dave