Prevent linebreak of floated elements - html

Question

Im trying to create a header of a website that has the logo left aligned, a navigation div that is 960px wide and centered and a log in area that is right aligned.
Here is a screen shot of my progress
The issue is that the login breaks to a new line and I don't know how to prevent it. Floating the elements doesn't work.
Here is a Fiddle
But it doesnt produce the same results I'm seeing when I run it locally.
HTML
<div id="header"><!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
</div>
CSS
/*Header Options*/
#header{
width:100%;
background-color:green;
height:125px;
}
#logoHolder{
float:left;
}
#navigation{
width:960px;
background-color:blue;
margin-left:auto;
margin-right:auto;
}
#loginHolder{
float:right;
}

Answer 1

Just re-order your HTML to the following (move loginHolder above navigation) and it works fine:
<div id="header">
<!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
</div>
jsFiddle example

Answer 2

You've got to be careful with widths. The navigation width is overwhelming the other divs. And, if I'm not mistaken, div has a built in line break. the answer above has one solution, I played with a couple edits also: you can copy in this css:
/Header Options/
header {
width:100%;
background-color:green;
height:125px;
}
logoHolder {
width: 100px;
background-color: red;
float:left;
}
navigation {
width:344px;
background-color:blue;
float:left;
}
loginHolder {
width:100px;
background-color:yellow;
float:left;
}