Элементы выравнивания проблем (HTML и CSS)

Question

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

alt text http://img64.imageshack.us/img64/6756/align.png

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

Простым решением было бы установить родительское положение: относительное и ваше меню в положение: абсолютное; bottom: 0; но это не идеально.

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

Answer 2

Попробуйте установить высоту навигационной DIV равной высоте логотипа. Затем используйте vertical-align: bottom, чтобы поместить навигацию в нижней части своего содержащего div.