CSS list dropping down a line from image - html

Question

This is my code: http://jsfiddle.net/2h6p3vvd/
I'm trying to align my list to the right of the logo, however it seems to sit on the line below, but still to the right.
HTML
<header>
<nav class="container">
<img src="#">
<ul>
<li>Add</li>
</ul>
</nav>
</header>
CSS
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
header nav {
height: 50px;
line-height: 50px;
}
header ul {
float: right;
}
ol, ul {
list-style: none;
}
Is this an issue with the float, and should I be using some sort of overflow rule to correct it?

Answer 1

The problem is that your li has inherited the line-height from nav parent... Reset it, and it will be inline:
Updated Fiddle
header ul li {
line-height: 0px;
}
EDIT
Also, keep in mind that float makes an element float over the element that comes after it. So, your ul must be put before the logo, so that it can float accordingly.

Answer 2

The ul is applying a top margin, which pushes the list down.
To avoid this, add the following to your header ul style:
margin: 0 auto;

Answer 3

Write your html structure following way
<header>
<nav class="container">
<div class="logo">
<img src="" alt="" />
</div>
<div class="menu">
<ul>
<li>Add</li>
</ul>
</div>
</nav>
</header>
and write css like
.container {
width: 960px;
margin: 0 auto;
}
.logo{width: 300px;float:left;}
.menu{float:left;}

Answer 4

Change line height to zero and add float left http://jsfiddle.net/2h6p3vvd/4/
try this
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
.container img{
position:absolute;
}
header nav {
height: 50px;
line-height: 0px;
}
header ul {
margin-left:0px;
float:left;
}
ol, ul {
list-style: none;
}

Answer 5

Better put them in table columns with border="0px" and width=100% with one extra column in the middle
eg:
<header>
<nav class="container">
<table width=100% border=0px>
<tr>
<td><img src="#"></td>
<td width=100%><!--This column is only needed only when you want to push image and list to extreme left and right respectively--></td>
<td><ul>
<li>Add</li>
</ul></td>
</tr>
</table>
</nav>
</header>