title: CSS absolute position alignment
body: <p>I have a login form on my website that displays when a user clicks a button. It is a div that floats over other content. It only takes up a small portion of the page (directly below the sign in link).</p>
  
  <p>It all works fine apart from one small thing. It displays aligned to the left of the sign in link (i attempted a diagram below).</p>
  
  <blockquote>
    <p>|sign in|</p>
    
    <p>|sign in stuff here|</p>
  </blockquote>
  
  <p>I actually want it to look like this (align to the right of the sign in link):</p>
  
  <blockquote>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|sign
    in|</p>
    
    <p>|sign in stuff here|</p>
  </blockquote>
  
  <p>This is my HTML:</p>
  
  <pre><code>        &lt;div class="clear"&gt;
              &lt;a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"&gt;&lt;span id="spanSignIn"&gt;Sign In / Register &lt;img src="../../Content/shared/arrow_down.png" border="0" /&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="signinbox" style="display:none;"&gt;
              &lt;p&gt;Who would you like to sign in with?&lt;/p&gt;
              &lt;p&gt;Google&lt;/p&gt;
              &lt;p&gt;Yahoo&lt;/p&gt;
              &lt;p&gt;Other&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS for the sign in box:</p>
  
  <blockquote>
    <p>signinbox {background-color:#C1DEEE;
      padding:10px;   z-index:1;  position:
    absolute;     top:66px; }</p>
  </blockquote>
  
  <p>Is it possible to do this in just CSS?</p>
  
  <p>Thanks</p>