title: CSS Fixed Position float right
body: <p>I have this code:</p>
  
  <pre><code>&lt;style&gt; 
          .floatright 
          {
              float: right;
              margin-right:800px;
          }
  
          .menu {
              padding: 0;
              float: right;
              width: auto;
              position:relative;
          }
          .menu ul {
              list-style-type: none; 
              margin: 0; 
              padding: 0;
          } 
          .menu li { 
              display:inline; 
              padding:0;
              margin: 0px;
          } 
          .menu a:link, 
          .menu a:hover {
              text-decoration:none;
              padding:0 5px 5px 0;
              margin-right: 8px;
          }
  &lt;/style&gt;
  
  &lt;div class="floatright"&gt;
  &lt;ul class="menu"&gt;
  &lt;li&gt;&lt;a href="/apidocs"&gt;api&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/tools"&gt;tools&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/blog"&gt;blog&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>it is meant to float to the right of the page (not in the right corner - just to the left) and have gaps between each link.</p>
  
  <p>The gaps work ok but when the screen is resized ti does not stay where it is supposed to</p>
  
  <p>any ideas?</p>