Aligning elements with vertical-align: bottom doesn't work

I know it is an humiliating and basic problem, but I can't align the navigation div (green borders) with the logo div (red borders) in the bottom of the parent div (blue borders). I tried vertical-align: bottom, but didn't work, any suggestions?

HTML:

<div id="banner">
        <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
        <ul id="lang">
            <li><a href="index.php">English</a></li>
            <li><a href="es/index.php">Español</a></li>
            <li><a href="tw/index.php">中文(繁體)</a></li>
            <li><a href="cn/index.php">中文(简体)</a></li>
        </ul>
        <ul id="nav"> 
            <li class="home"><a href="index.html">home</a></li>
            <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
            <li class="about"><a href="about.php">about</a></li>
            <li class="contact"><a href="form.html">contact</a></li>
        </ul>
    </div>  

CSS:

#banner {
    background-color: #FBFBFB;
    float: left;
    padding: 10px 15px;
    width: 928px; /* 720 */
    border: 1px solid #E2E2E2;
}
#banner h1 {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    display: inline; /* ie6 hack for double margin */
    height: 21px;
    font-size: 32px;
    float: left;
    text-indent: -9999px;
    width: 169px;
}
#header a { 
    color: #999;
}
#lang {
    float: right;
}
#lang li {
    float: left;
    margin: 0 0 0 20px;
}
#lang li a { 
    font-size: 10px;
}
#nav {
    float: left;
    list-style: none;
    padding: 0 0 0 20px;
}
#nav li {
    float: left;
    margin: 0 30px 0 0;
}
#nav li a {
    float: left;
    font-开发者_如何转开发size: 16px;
    outline: none;
    text-decoration: none;
}
#nav li a:hover {
    color: #666;
}

---

A simple fix would be to set the parent to position: relative and your menu to postion: absolute; bottom: 0; but it's not ideal.

I guess the best option is (since they have fixed heights), to give it a margin-top with the right amount of pixels.

---

Try setting the height of your navigation div equal to the height of the logo image. Then use vertical-align: bottom to put the navigation at the bottom of its containing div.