title: Vertically align text bottom - absolute position, without knowing width
body: <p>I'm getting stumped here...
  I'm trying to vertically align text in a top nav that has two different lines on each li.
  Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.</p>
  
  <p>In my navigation, we don't have a standard width, but need all items aligned by the bottom text.</p>
  
  <p>Here's my code</p>
  
  <pre><code>&lt;div id="menu"&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;first line&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Second&lt;br /&gt;Line&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;third Line&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS I'm using:</p>
  
  <pre><code>#menu {
      margin: 40px auto 0px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      font-style: normal;
      font-weight: bold;
      font-variant: normal;
      color: #666666;
      float: right;
      width:600px;
  }
  
  #menu ul {
      list-style:none;
      list-style-type:none;
      height:30px;
  }
  
  #menu ul li {
      float:left;
      margin:0 11px;
      padding:5px 0;
  
  }
  
  #menu ul li a {
      color:#666666;
      text-align:center;
      font-size:11px;
      display:block;
      line-height:1em;
      height:30px;
  
  }
  </code></pre>
  
  <p>As you can see in the second li, there is a linebreak.
  What I need is all the items to line up on the bottom, however, I can't use the width element.</p>
  
  <p>Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.</p>