Question

I am using jQuery to slide a sign in box down when the user clicks “Sign In”. When it is clicked, I would like the whole page to slide down, including the logo. So far, the page does slide down, except for the logo. You can view the page here:

http://mini.lukedude5.com

When either “Sign In” or “Sign Up” is clicked, the body of the page slides down (set bottom margin to 500px to exaggerate it). However as you can see, the logo “mi.ni” doesn’t slide down.

<div id = 'header'>
    <a href = '/' title = 'mi.ni' id = 'logo'>mi.ni</a>
</div>

Above is the HTML for the logo, and below is the CSS.

#wrapper
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#wrapper #header
{
    height: 100px;
    width: 260px;
    background: url('/styles/images/logo2.png') no-repeat;
    margin: 20px auto 0px auto;
}

#wrapper #header #logo
{
    height: 100px;
    width: 260px;
    display: block;
    text-indent: -9999px;
}

The header is wrapped in the wrapper. The bar from which the sign in box slides down is NOT inside the wrapper.

The CSS for the sign in/up box is:

#topBar #signIn, #signUp
{
    width: 250px;
    float: right;
    color: #FFF;
    margin-top: 5px;
    font-weight: bold;
    display: none;
    margin-bottom: 500px;
}

Any help on this issue is appreciated!

EDIT: HTML for bar spanning top of page.

<div id = 'topBarWrapper'>
        <div id = 'topBar'>
            <div id = 'mainTop'>
                mi.ni is a URL shortening service. Learn more about mi.ni. I am trying my hardest to get the domain http://mi.ni.
            </div>
            <div id = 'rightTop'>
                <span id = 'signInText'>Sign In</span>
                |
                <span id = 'signUpText'>Sign up</span>
            </div>
            <div id = 'signIn'>
                <form action = '' method = 'POST'>
                    <table>
                        <tr>
                            <td>Username:</td>
                            <td><input type = 'text' name = 'username' id = 'usernameSignIn' class = 'input' /></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><input type = 'password' name = 'password' id = 'passwordSignIn' class = 'input' /></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><div class = 'signInSubmit'></div></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id = 'signUp'>
                <form action = '' method = 'POST'>
                    <table>
                        <tr>
                            <td>Username:</td>
                            <td><input type = 'text' name = 'username' id = 'usernameSignUp' class = 'input' /></td>
                        </tr>
                        <tr>
                            <td>Email:</td>
                            <td><input type = 'text' name = 'email' id = 'emailSignUp' class = 'input' /></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <td><input type = 'password' name = 'password' id = 'passwordSignUp' class = 'input' /></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><div class = 'signUpSubmit'></div></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>

CSS for bar:

#topBarWrapper
{
    width: 100%;
    height: 25px;
    padding-top: 5px;
    background: #000;
    color: #FFF;
}

#topBar
{
    width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

#topBar #mainTop
{
    display: inline;
}

#topBar #rightTop
{
    display: inline;
    margin-left: 50px;
    font-weight: bold;
}

#topBar #rightTop #signInText
{
    cursor: pointer;
    margin-right: 5px;
}

#topBar #rightTop #signUpText
{
    cursor: pointer;
    margin-left: 5px;
}

#topBar #signIn, #signUp
{
    width: 250px;
    float: right;
    color: #FFF;
    margin-top: 5px;
    font-weight: bold;
    display: none;
    margin-bottom: 500px;
}

Answer 1

Set clear:both on the wrapper div. There was some collapsing going on there.

#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
clear: both;
}