Q: Trying to create a login page that uses an animated form switching, but the forms are not getting aligned correctly So, I've been trying to create a webapp that requires a user login. I took the idea that's in this fantastic looking login form I found, that uses animated form switching tried to use the same, but my boxes get aligned to the left (except the one defined as active).
The form defined as active when the page loads is centered, but when I switch forms by clicking on links, the alignment is lost. I'm using jQuery UI 1.9.2. 
Here's the code I have so far. And here's the jsFiddle for the same code that's below.
I want to have the forms always centered and haven't been able to figure out why this isn't happening. I'm sort of new to web development. Any help would be appreciated!
HTML:
<div class="content">
    <div id="form_wrapper" class="form_wrapper">
        <form class="register">
            <div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 350px">
                <input type="text" placeholder="First Name" id="fname">
                <input type="text" placeholder="Last Name" id="lname">
                <input type="text" placeholder="Username" id="uname">
                <input type="password" placeholder="Password" id="pwdReg">
                <input type="password" placeholder="Confirm Password" id="pwdRegConfirm">
                <input type="text" placeholder="Email address">
                <button id="Register" class="submitButton">Register</button>
                <label class="textInBox" style="top:20px"><a href="index.html" rel="login" class="linkform">Have an account already? Log in here</a>

                </label>
            </div>
        </form>
        <form class="login active">
            <div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 260px">
                <input type="text" placeholder="Username" id="username">
                <input type="password" placeholder="Password" id="password">
                <label class="textInBox" style="top:7px"><a href="#" rel="forgot_password" class="forgot linkform">Forgot your password?</a>

                </label>
                <button id="submitLogin" class="submitButton">Login</button>
                <label class="textInBox" style="top:20px"><a href="#" rel="register" class="linkform">Don't have an account? Register here</a>

                </label>
            </div>
        </form>
        <form class="forgot_password">
            <div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 220px">
                <input type="text" placeholder="Enter your email address here" id="emailAddrResetPass">
                <button id="SendNewPassword" class="submitButton">Reset Password</button>
                <label class="textInBox" style="top:15px"><a href="index.html" rel="login" class="linkform">Remebered password? Log in here</a>

                </label>
                <label class="textInBox" style="top:25px"><a href="#" rel="register" class="linkform">Don't have an account? Register here</a>

                </label>
            </div>
        </form>
    </div>
    <div class="clear"></div>
</div>

JS:
$(function () {
    //the form wrapper (includes all forms)
    var $form_wrapper = $('#form_wrapper'),
        //the current form is the one with class active
        $currentForm = $form_wrapper.children('form.active'),
        //the change form links
        $linkform = $form_wrapper.find('.linkform');

    //get width and height of each form and store them for later                        
    $form_wrapper.children('form').each(function (i) {
        var $theForm = $(this);
        //solve the inline display none problem when using fadeIn fadeOut
        if (!$theForm.hasClass('active')) $theForm.hide();
        $theForm.data({
            width: $theForm.width(),
            height: $theForm.height()
        });
    });

    //set width and height of wrapper (same of current form)
    setWrapperWidth();

    /*
                clicking a link (change form event) in the form
                makes the current form hide.
                The wrapper animates its width and height to the 
                width and height of the new current form.
                After the animation, the new form is shown
                */
    $linkform.bind('click', function (e) {
        var $link = $(this);
        var target = $link.attr('rel');
        $currentForm.fadeOut(400, function () {
            //remove class active from current form
            $currentForm.removeClass('active');
            //new current form
            $currentForm = $form_wrapper.children('form.' + target);
            //animate the wrapper
            $form_wrapper.stop()
                .animate({
                width: $currentForm.data('width') + 'px',
                height: $currentForm.data('height') + 'px'
            }, 500, function () {
                //new form gets class active
                $currentForm.addClass('active');
                //show the new form
                $currentForm.fadeIn(400);
            });
        });
        e.preventDefault();
    });

    function setWrapperWidth() {
        $form_wrapper.css({
            width: $currentForm.data('width') + 'px',
            height: $currentForm.data('height') + 'px'
        });
    }
});

CSS: 
.loginBox {
    border: 1px solid #a1a3a3;
    border-radius: 2px;
}
.textInBox {
    color: #7f7f7f;
    display: inline-block;
    float: right;
    font: 10px/1 sans-serif;
    left: -29px;
    position: relative;
    text-decoration: none;
    top: 10px;
    transition: color .8s;
}


A: Add to your CSS:
.form_wrapper {
    margin:0 auto;
}

http://jsfiddle.net/xm5Ux/1/
