Question

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.