Logo rutscht nicht nach unten (HTML, CSS, jQuery)

Question

Ich verwende jQuery, um ein Anmeldefeld zu verschieben, wenn der Benutzer auf "Anmelden" klickt. Wenn Sie darauf klicken, möchte ich, dass die gesamte Seite nach unten gleitet, einschließlich des Logos. Bisher rutscht die Seite mit Ausnahme des Logos nach unten. Sie können die Seite hier:

http://mini.lukedude5.com

Wenn entweder „Anmelden“ oder „Registrieren“ klicken, wird der Körper der Seite nach unten gleitet (Set unteren Rand auf 500px es übertreiben). Wie Sie jedoch sehen können, rutscht das Logo "mi.ni" nicht nach unten.

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

Oben ist der HTML-Code für das Logo und unten ist das 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; 
} 

Die Kopfzeile ist in die Hülle eingewickelt. Die Leiste, von der aus die Anmeldebox heruntergleitet, befindet sich NICHT im Wrapper.

Die CSS für das Zeichen in/up-Box ist:

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

Jede Hilfe zu diesem Thema zu schätzen!

EDIT: HTML für Bar überspannend zum Seitenanfang.

<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 für 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 auf der Umhüllung div. Dort ging etwas zusammen.

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