title: CSS simple menu - how to align?
body: <p>Got a newbie CSS question, just beginning to get into CSS so please bear with me. <br>In my ASP.NET MVC app there's a menu:</p>
  
  <pre><code>&lt;div id="menucontainer"&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;something&lt;/li&gt;
          &lt;li&gt;something&lt;/li&gt;
          &lt;li&gt;something&lt;/li&gt;
          &lt;li&gt;something&lt;/li&gt;
          &lt;li&gt;something&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS styles for it:</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>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?</p>