css absolute position submit button bottom right corner not working

Question

For some reason it positions the button outside of the div, just above the top right corner. It's as if just above the top right corner of the div is acting just like the bottom right corner.

if i add bottom 10px, for example, it will start above the div and move it up 10px. The same thing happens with right

CSS:

        #newSignupContent {
            display: block;
            position: relative;

            width: 400px;
            height: 250px;
            margin: auto auto;
        }

        #newSignupContent label {
            display: inline-block;
            float: left;
            clear: left;
            width: 40%;
            padding-right: 10px;

            text-align: right;
            color: white;
            font-family:calibri, Times, serif;
            font-size: 22px;

        }

        #newSignupContent input {
            display: inline-block;
            width: 50%;
            float: left;
            padding: 5px 10px 5px 0px;
        }

        #newSignupContent #newSignupSubmit {
            position: absolute;
            bottom: 0;
            right: 0;

            width: 80px;
            height: 40px;

            padding: 5px 10px 5px 10px;
        }

Form:

 <div id="newSignupContent">
                    <form action="/webroot/NewUserSignUpProcess" method="post">

                        <label>Account Name:</label>
                        <input type="text" name="txtAccountName">

                        <label>Email Address:</label>
                        <input type="text" name="txtEmailAddress">

                        <label>Password:</label>
                        <input type="text" name="txtPassword">

                        <input id="newSignupSubmit" type="submit" value="Submit">

                    </form>
                </div>

Answer 1

Because of the * {position:relative;} you had there, your button position it self relatively to the 'form' element. The 'form' element, had no height, because all of its descendants had 'float:left;' and thus didn't "stretch" the form's height. The 'submit' button, positioned at 'bottom:0;right:0;' relative to the form, which had no height, resulted in what looked like the top right corner of the containing 'div'.

In the attached Fiddle Demo, notice that if you remove the 'position:relative;' form the 'form' element, everything sets up right. I also added borders to the containing 'div' and to the 'form'.