CSS simple menu - how to align?

Question

Hello,
Got a newbie CSS question, just beginning to get into CSS so please bear with me.
In my ASP.NET MVC app there's a menu:

<div id="menucontainer">
            <ul id="menu">
                <li>something</li>
                <li>something</li>
                <li>something</li>
                <li>something</li>
                <li>something</li>
            </ul>
        </div>

And CSS styles for it:

ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    display: inline;
    margin: 0;
    width: 100%;
    text-align: left;
    list-style: none;
}

ul#menu li
{
    display: inline;
    position: relative;
    list-style: none;
}

#menucontainer
{
    margin-top: 40px;
    width: 100%;
}

How can I make some of the li elements align left and the rest of them right in a single line? Tried to break it into two menus and write two different styles, just can't seem to get the right css. Probably have to build a valid box model - any pointers on that?

Answer 1

You'll need two <ul>s, one with float:left and the other with float:right. That should do it.

Answer 2

There are several methods on how to do what you want. A List Apart has an article about 6 different methods on how to do this.