CSS absolute position alignment

Question

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).

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).

|sign in|

|sign in stuff here|

I actually want it to look like this (align to the right of the sign in link):

                |sign in|

|sign in stuff here|

This is my HTML:

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

And the CSS for the sign in box:

signinbox {background-color:#C1DEEE; padding:10px; z-index:1; position: absolute; top:66px; }

Is it possible to do this in just CSS?

Thanks

Answer 1

Wrap the signin info inside another div and call it inner-signin then position that relative to the absolute positioned outter div. You may also have to set the width on the absolute positioned outter div.

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

If that does not work, why not just add a "left" property to the signingbox to set the horizontal position as well as the vertical. Is there a reason you don't can't absolute position the element with x and y?

Answer 2

I think you may want to try

float: right

or

text-align: right

Answer 3

Put the sign-in stuff inside the div containing the sign-in button.

Make the container position: relative.

Then give the sign-in stuff position: absolute; and right: 0;.

Incidentally, take care here; requiring Javascript merely to log in is pretty rude. A lot of people run NoScript for a variety of reasons.

Answer 4

I have created new div with class "main-pane". You can adjust the position of "signinbox". from the css by changing the value of "right" and "top".

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}

Thanks, Arun Krishnan