navigation buttons go out of the div - php

Question

My navigation of my website acts strange 2 buttons go out of the div and i cant find the reason for this.
the thing i want is that the 2 blue buttons are on the right of the div but if i float them they still stay out of the div.
image:
HTML:
<div id="navigation">
<ul>
<li>Home</li>
<li>plaats advertentie</li>
<li>Advertenties</li>
</ul>
<ul>
<?php
session_start();
echo '<div id="login">';
if(isset($_SESSION['username'])){
echo'<li>Profile</li>
<li>Logout</li>';
}else{
echo'<li>Register</li>';
echo'<li>Login</li>';
}
echo '</div>';
?>
</ul>
</div>
CSS:
#navigation{
border:1px solid;
border-radius: 2px;
height:50px;
margin-top:1%;
margin-bottom:1%;
background:#6F4E37;
border-radius:8px;
}
#navigation ul
{
margin: 0;
padding-top:1%;
border:1px solid;
}
#navigation ul li
{
display: inline;
}
#navigation li a
{
padding:10px;
margin:0.5%;
background: #6F4E37;
color:black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
text-decoration: none;
}
#login li a
{
background:#b2fff1;
padding:10px;
margin:0.5%;
background:#b2fff1;
color:black;
text-decoration: none;
}
#navigation li a:hover {
background: #805a3f;
border: solid 1px #2A4E77;
text-decoration:underline;
}
#login li a:hover
{
background:#4cffdf;
border: solid 1px #2A4E77;
text-decoration:underline;
}

Answer 1

<?php
session_start();
echo '<div id="login">';
if(isset($_SESSION['username'])){
echo'<li>Profile</li>
<li>Logout</li>';
}else{
echo'<li>Register</li>';
echo'<li>Login</li>';
}
echo '</div>';
?>
Then change your CSS:
#navigation {
border:1px solid;
border-radius: 2px;
height:50px;
margin-top:1%;
margin-bottom:1%;
background:#6F4E37;
border-radius:8px;
}
#navigation ul {
margin: 0;
padding-top:1%;
border:1px solid;
}
#navigation ul li {
display: inline;
}
#navigation li a {
padding:10px;
margin:0.5%;
background: #6F4E37;
color:black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
text-decoration: none;
}
#login {
float:right;
}
#login li {
float:left;
padding-left:10px;
}
#login li a {
background:#b2fff1;
padding:10px;
margin:0.5%;
background:#b2fff1;
color:black;
text-decoration: none;
}
#navigation li a:hover {
background: #805a3f;
border: solid 1px #2A4E77;
text-decoration:underline;
}
#login li a:hover {
background:#4cffdf;
border: solid 1px #2A4E77;
text-decoration:underline;
}
Fiddle Here

Answer 2

First:
white-space is your friend. Don't glue everything in the PHP together.
Second:
It is not allowed to use div immediately as the child of the ul element. If you need to add an id attribute, add it to the ul
<ul id="login">
<?php
session_start();
if (isset($_SESSION['username'])) {
echo '<li>Profile</li>'.
'<li>Logout</li>';
} else {
echo '<li>Register</li>';
echo '<li>Login</li>';
}
?>
</ul>
Third:
Switch the uls places and float the one with id="login" to the right:
<ul id="login">
<?php
session_start();
if (isset($_SESSION['username'])) {
echo '<li>Profile</li>'.
'<li>Logout</li>';
} else {
echo '<li>Register</li>';
echo '<li>Login</li>';
}
?>
</ul>
<ul>
<li>Home</li>
<li>plaats advertentie</li>
<li>Advertenties</li>
</ul>
CSS:
#login {
float: right;
}

Answer 3

Updated answer:
HTML
<div id="navigation">
<ul class="leftnav">
<li>Home</li>
<li>plaats advertentie</li>
<li>Advertenties</li>
</ul>
<ul class="rightnav">
<?php
session_start();
echo '<div id="login">';
if(isset($_SESSION['username'])){
echo'<li>Profile</li>
<li>Logout</li>';
}else{
echo'<li>Register</li>';
echo'<li>Login</li>';
}
echo '</div>';
?>
</ul>
CSS
#navigation{
border:1px solid;
border-radius: 2px;
height:50px;
margin-top:1%;
margin-bottom:1%;
background:#6F4E37;
border-radius:8px;
}
#navigation ul
{
margin: 0;
padding-top:1%;
border:1px solid;
}
#navigation ul.leftnav {
float: left;
}
#navigation ul.rightnav {
float: right;
}
#navigation ul li
{
display: inline;
}
#navigation li a
{
padding:10px;
margin:0.5%;
background: #6F4E37;
color:black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
text-decoration: none;
}
#login li a
{
background:#b2fff1;
padding:10px;
margin:0.5%;
background:#b2fff1;
color:black;
text-decoration: none;
}
#navigation li a:hover {
background: #805a3f;
border: solid 1px #2A4E77;
text-decoration:underline;
}
#login li a:hover
{
background:#4cffdf;
border: solid 1px #2A4E77;
text-decoration:underline;
}