如何保持div与外部div的底部对齐？

Question

我正在为html页面左侧的网站创建一个菜单，但我希望我的页脚与容器/ div的底部保持对齐，无论屏幕大小如何。什么是最好的解决方案？

<div id="main">
<div id="menu">
     <div id="logo">container1</div>
    <div id="navbar">caontainer2</div>
    <div id="footer">container3</div>
</div>

http://jsfiddle.net/salehkaddoura/SekYb/

我尝试过纵向对齐和搞乱定位，但它似乎没有帮助，Jsfiddle基本上是我的样式表中的代码副本，我希望container3保持对齐到菜单容器的底部