Help with positioning logo/navigation links

Question

Screenshot of the problem:

http://i36.tinypic.com/dfxdmd.jpg

The yellow block is the logo and the blue box is the nav links (I have blanked them out). I would like to align the links at the bottom so they are stuck to the top of the body content (white box). How would I do this? Here is the relevant CSS and HTML.

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background-image:url(logo.png);
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    vertical-align: bottom;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

 <div id="header">
  <div id="logo"><a href="/"></a></div>
  <div id="nav">
   <ul>
   <li><a href="#">*****</a></li>
                            [...]
   </ul>
  </div>
 </div>

Thanks in advance.

Answer 1

Bottom left? If so - start by setting clear: both; on your #nav block.

Other than that, I don't really understand your question - can you make a jpg of how you'd like it to look?

Answer 2

Try this. Seems to work in Firefox/Mac

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background: #00ffff;
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding-top: 18px;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

Answer 3

You can use absolute positioning like this:

#header {
    position: relative;

    height: 42px;
}
#nav {
    position: absolute;
    bottom: 0px;

    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}

in this method, you make "nav" with absolute positioning related to "header" division.