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?