Twitter Bootstrap navbar float right moves div to new line - html

Question

Hello I'm trying to create a section on the right of the navbar. I used the div class navbar-right which should float the div to the right, but I am getting a new line instead.
See below for code & thanks!
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">xxx</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="navbar-right">
<p>
<b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
</p>
</div>
</div>
</div>

Answer 1

In order to be placed at the top level of nav-bar, the contents must be placed inside of a div with the class: navbar-header
So instead of declaring the logout link inside of the div:
<div class="navbar-right">
Use the following classes instead:
<div class="navbar-header pull-right">
Since you'll want the Brand to pull-left, you can place two navbar-header divs right next to each other at the very top and have one pull to each direction. Like this:
<div class="navbar-header pull-left">
<a class="navbar-brand" href="index.php">xxx</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-text">
<b> '.$username.' </b>
Logout
</p>
</div>
jsFiddle
Expanded
Collapsed
Update:
As per Ram's comment, in order to not have the pull down menu not overlap on a small screen, you'll have to clear the left float like this:
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}

Answer 2

Instead of,
<div class="navbar-right">
<p>
<b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
</p>
</div>
Use,
<p class="pull-right">
<b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
</p>