CSS misplacement of nav in html5

Question

I have this code:

<header>
    <div id="title">
        <h1><img alt="logo" src="/Content/logo.gif" />&nbsp;&nbsp;&nbsp;&nbsp;Choose your product</h1>
    </div>
    <nav>
        <ul id="menu">
            <li>Products</li>
            <li>Auctions</li>
            <li>Segmentation</li>
        </ul>
    </nav>
</header>

And this is the css:

body {
    /*background-color: #5c87b2;*/
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

header,
footer,
nav,
section {
    display: block;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
    overflow:auto;
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #999;
    border: none;
    line-height: 1em;
    font-size: 48px !important;
    text-shadow: 1px 1px 2px #111;
}

ul#menu {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

nav, 
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

That generate this:

As you can see there is 2 problems, the little scroll on the right and that the nav is align to the top and not the bottom. I tried the vertical-align attribute but it didnt help. The picture on the left has an overflow:auto attribute.

EDIT: I've removed the float: left; and text-align: left; and it fixed but now they are one under the other...

Thanks.

Answer 1

Remove from header, #header rule overflow:auto <-it makes scrollbars visible.

Second thing is that   (please!) replace with some padding rule ;)