title: Css asp:menu floating
body: <p>I'm having an issue with CSS (not sure).</p>
  
  <p>Actually I'm new to CSS, and I'm trying to understand it.</p>
  
  <p>Ok, let's take a look:</p>
  
  <ul>
  <li>I've created an WebApplication (ASP.Net web) with Visual Studio 2010</li>
  <li>And I decided to use the original template given by VS 2010</li>
  <li>I've tried to make the default menu right floating. But I couldn't make that.</li>
  <li><p>The original menu looks like:</p>
  
  <pre><code>|Home|About_______________________________|
  </code></pre></li>
  <li><p>And I want to make it looks like:</p>
  
  <pre><code>|_______________________________Home|About|
  </code></pre></li>
  <li>I tried style="float: right;".</li>
  <li><p>I also tried dir="rtl", but I got something like:</p>
  
  <pre><code>|_______________________________About|Home|
  </code></pre></li>
  </ul>
  
  <p>How can I solve this problem? </p>
  
  <p>I'm not sure that it's a CSS issue or a control issue. I'm not familiar with Web Application, I've worked on Winform Application.</p>
  
  <p>This is the Site.Master:</p>
  
  <pre><code>    &lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form runat="server"&gt;
      &lt;div class="page"&gt;
          &lt;div class="header"&gt;
              &lt;div class="title"&gt;
                  &lt;h1&gt;
                      My ASP.NET Application
                  &lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="loginDisplay"&gt;
                  &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                      &lt;AnonymousTemplate&gt;
                          [ &lt;a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server"&gt;Log In&lt;/a&gt;
                          ]
                      &lt;/AnonymousTemplate&gt;
                      &lt;LoggedInTemplate&gt;
                          Welcome &lt;span class="bold"&gt;
                              &lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;
                          &lt;/span&gt;! [
                          &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                              LogoutPageUrl="~/" /&gt;
                          ]
                      &lt;/LoggedInTemplate&gt;
                  &lt;/asp:LoginView&gt;
              &lt;/div&gt;
              &lt;div class="clear hideSkiplink"&gt;
                  &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                      IncludeStyleBlock="false" Orientation="Horizontal" dir="rtl"&gt;
                      &lt;Items&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" /&gt;
                          &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="About" /&gt;
                      &lt;/Items&gt;
                  &lt;/asp:Menu&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="main"&gt;
              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server" /&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is the CSS:</p>
  
  <pre><code>/* DEFAULTS
  ----------------------------------------------------------*/
  
  body   
  {
      background: #b6b7bc;
      font-size: .80em;
      font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
      margin: 0px;
      padding: 0px;
      color: #696969;
  }
  
  a:link, a:visited
  {
      color: #034af3;
  }
  
  a:hover
  {
      color: #1d60ff;
      text-decoration: none;
  }
  
  a:active
  {
      color: #034af3;
  }
  
  p
  {
      margin-bottom: 10px;
      line-height: 1.6em;
  }
  
  
  /* HEADINGS   
  ----------------------------------------------------------*/
  
  h1, h2, h3, h4, h5, h6
  {
      font-size: 1.5em;
      color: #666666;
      font-variant: small-caps;
      text-transform: none;
      font-weight: 200;
      margin-bottom: 0px;
  }
  
  h1
  {
      font-size: 1.6em;
      padding-bottom: 0px;
      margin-bottom: 0px;
  }
  
  h2
  {
      font-size: 1.5em;
      font-weight: 600;
  }
  
  h3
  {
      font-size: 1.2em;
  }
  
  h4
  {
      font-size: 1.1em;
  }
  
  h5, h6
  {
      font-size: 1em;
  }
  
  /* this rule styles &lt;h1&gt; and &lt;h2&gt; tags that are the 
  first child of the left and right table columns */
  .rightColumn &gt; h1, .rightColumn &gt; h2, .leftColumn &gt; h1, .leftColumn &gt; h2
  {
      margin-top: 0px;
  }
  
  
  /* PRIMARY LAYOUT ELEMENTS   
  ----------------------------------------------------------*/
  
  .page
  {
      width: 960px;
      background-color: #fff;
      margin: 20px auto 0px auto;
      border: 1px solid #496077;
  }
  
  .header
  {
      position: relative;
      margin: 0px;
      padding: 0px;
      background: #4b6c9e;
      width: 100%;
  }
  
  .header h1
  {
      font-weight: 700;
      margin: 0px;
      padding: 0px 0px 0px 20px;
      color: #f9f9f9;
      border: none;
      line-height: 2em;
      font-size: 2em;
  }
  
  .main
  {
      padding: 0px 12px;
      margin: 12px 8px 8px 8px;
      min-height: 420px;
  }
  
  .leftCol
  {
      padding: 6px 0px;
      margin: 12px 8px 8px 8px;
      width: 200px;
      min-height: 200px;
  }
  
  .footer
  {
      color: #4e5766;
      padding: 8px 0px 0px 0px;
      margin: 0px auto;
      text-align: center;
      line-height: normal;
  }
  
  
  /* TAB MENU   
  ----------------------------------------------------------*/
  
  div.hideSkiplink
  {
      background-color:#3a4f63;
      width:100%;
  }
  
  div.menu
  {
      padding: 4px 0px 4px 8px;
  }
  
  div.menu ul
  {
      list-style: none;
      margin: 0px;
      padding: 0px;
      width: auto;
  }
  
  div.menu ul li a, div.menu ul li a:visited
  {
      background-color: #465c71;
      border: 1px #4e667d solid;
      color: #dde4ec;
      display: block;
      line-height: 1.35em;
      padding: 4px 20px;
      text-decoration: none;
      white-space: nowrap;
  }
  
  div.menu ul li a:hover
  {
      background-color: #bfcbd6;
      color: #465c71;
      text-decoration: none;
  }
  
  div.menu ul li a:active
  {
      background-color: #465c71;
      color: #cfdbe6;
      text-decoration: none;
  }
  
  /* FORM ELEMENTS   
  ----------------------------------------------------------*/
  
  fieldset
  {
      margin: 1em 0px;
      padding: 1em;
      border: 1px solid #ccc;
  }
  
  fieldset p 
  {
      margin: 2px 12px 10px 10px;
  }
  
  fieldset.login label, fieldset.register label, fieldset.changePassword label
  {
      display: block;
  }
  
  fieldset label.inline 
  {
      display: inline;
  }
  
  legend 
  {
      font-size: 1.1em;
      font-weight: 600;
      padding: 2px 4px 8px 4px;
  }
  
  input.textEntry 
  {
      width: 320px;
      border: 1px solid #ccc;
  }
  
  input.passwordEntry 
  {
      width: 320px;
      border: 1px solid #ccc;
  }
  
  div.accountInfo
  {
      width: 42%;
  }
  
  /* MISC  
  ----------------------------------------------------------*/
  
  .clear
  {
      clear: both;
  }
  
  .title
  {
      display: block;
      float: left;
      text-align: left;
      width: auto;
  }
  
  .loginDisplay
  {
      font-size: 1.1em;
      display: block;
      text-align: right;
      padding: 10px;
      color: White;
  }
  
  .loginDisplay a:link
  {
      color: white;
  }
  
  .loginDisplay a:visited
  {
      color: white;
  }
  
  .loginDisplay a:hover
  {
      color: white;
  }
  
  .failureNotification
  {
      font-size: 1.2em;
      color: Red;
  }
  
  .bold
  {
      font-weight: bold;
  }
  
  .submitButton
  {
      text-align: right;
      padding-right: 10px;
  }
  </code></pre>
  
  <p>All codes above are the default codes given by VS 2010.
     Help me!
  Thanks alot!</p>