how to have a menu across top with links left aligned and right aligned

Question

this may seem simple. I have a menu across the top of the page currently right aligned. I want one link to be to the left of the page. How do it?

 <div id="toptop"> 
     <ul id="bottomnavlistl">
    <li class="a">
             <a href="@Url.Content("~/Account/EditDetails/")">LOGIN</a>
             <a href="@Url.Content("~/Account/LogOff/")">LOGOUT</a>
    </li>
    <li class="first"><a href="@Url.Content("~")">HOME</a></li>

css

    ul#bottomnavlistl li
{    
    display: inline;
    padding: 10px 0px 5px 0px;
    border-right: 1px dotted #8A8575; 
    float:right;   
}

Answer 1

Use float:left

http://htmldog.com/reference/cssproperties/float/

Answer 2

Your css should have somthing like

.a{float:left;}
.first{float:right}

A demo here