Выравнивание элементов по вертикали: нижний не работает

Question

Я знаю, что это унизительная и основная проблема, но я не могу выровнять div навигации (зеленые границы) с логотипом div (красные границы) внизу родительского div (синие границы). Я попытался выровнять по вертикали: снизу, но ничего не получилось, какие-либо предложения?

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;
}

Answer 1

Простым решением было бы установить для родителя положение: относительное, а для вашего меню - положение: абсолютное; низ: 0; но это не идеально.

Я полагаю, что лучший вариант (так как они имеют фиксированную высоту), чтобы получить верхний край с правильным количеством пикселей.

Answer 2

Попробуйте установить высоту вашего навигационного элемента, равную высоте изображения логотипа. Затем используйте вертикальное выравнивание: внизу, чтобы поместить навигацию внизу содержащего элемента div.