make some menu links float right and other left - html

Question

I have this HTML code and CSS for a horizontal menu. It displays the links (boxes) from left to right floated to the left of the page.
What is the best way to make one of the links (boxes) display to float to the right of the page?
I have tried using float right with the below CSS copied as navigation-right and changed the HTML as needed but that did not work.
HTML
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
CSS
.navigation-left {
height:auto;
list-style:none;
margin-right:40px;
display:inline;
}
.navigation-left li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
display:inline-block;
}
.navigation-left li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.navigation-left li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.navigation-left li.current {
background-color:#F36F25;
}
.navigation-left li.current a {
color:#FFFFFF;
}
http://jsfiddle.net/W2x5y/

Answer 1

Is this Fiddle what you wanted?
<div class="navigation-left" style="float:left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-left">
<ul style="float:right; ">
<li>Acudetox</li>
</ul>
</div>

Answer 2

As you might expect, a simple float: right; does the trick.
<div class="navigation-left">
<ul>
<li>Home</li>
<li style="float: right">SAF</li>
<li>Acudetox</li>
</ul>
</div>
http://jsfiddle.net/W2x5y/1/

Answer 3

I think that you'd have to target some of the li tags with a class if you wanted to do that. Plus you need to max the width of the containing ul in order to give it room to float on the right.
http://jsfiddle.net/W2x5y/2/
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li class="right">Acudetox</li>
</ul>
</div>
ul {
width: 100%;
}
.right {
float: right;
}

Answer 4

Interesting questions. I'm hoping this helps.
You should anchor the navigation-left and navigation-right to a navigation box itself.
html:
<div class="nav-box">
<div class="nav-left">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
CSS
body .nav-box {
top:0;
width:100%;
height:auto;
background:#eee;
overflow:hidden;
}
.nav-box .nav-left {
display:inline;
left:0;
float:left;
width:auto;
}
.nav-box .nav-right {
display:inline;
right:0;
top:0;
float:right;
width:auto;
}
Working example: http://jsfiddle.net/VA7ya/1/

Answer 5

It seems like the two navs are sufficient different to split them into two elements. Create two elements. Here's a Fiddle: http://jsfiddle.net/q7e3M/1/
<div class="container">
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-right">
<ul>
<li>Acudetox</li>
</ul>
</div>
</div>
If you want to keep the same element: http://jsfiddle.net/Afxkt/1/
<ul class="navigation">
<li>Home</li>
<li>SAF</li>
<li class="navigation-right">Acudetox</li>
</ul>
CSS:
.navigation {
display: inline;
list-style: none;
}
.navigation li {
float: left;
}
.navigation-right {
float: right;
}

Answer 6

All at right side
.right_side{ float:right}
<div class="navigation-left right_side">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
Last <li> to the right
.navigation-left li:last-child{ float:right}
first <li> to the right
.navigation-left li:first-child{ float:right}
second <li> to the right
.navigation-left li:nth-last-child(2){ float:right}