div automatically going to the top - html

Question

Okay, I've seen loads of information about this, but none of the suggested fixes worked for me, or perhaps I just didn't properly understand, so if someone could break this down elementary for me that'd be great, or point me to another link that does. I have a series of divs to make my header, a main container with the logo inside floating left, and then another container floating right, that works all fine, but the internal "menu" container contains two divs in it, one supposed to be at the top, the other at the bottom... to visualize it, its login or register links at the top, and a series of menu links at the bottom. The problem is the ones that are supposed to be at the bottom are actually going to the top, right under the register and login links. If that didn't give you a visual picture, then here is the actual header http://www.sunnahspace.com/pages/header.php i've tried loads of stuff, maybe I've just been trying it wrong though. i've tried the whole, position absolute stuff and honestly i don't even know what that means, but I get the feeling I'm headed in the right direction. Thanks in advance for anyone's help!
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>

Answer 1

add the following to your styles
#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}