頁腳正在分割內容

-1

我在頁面上有一個頁腳，它將一些內容放在頂部，然後放在底部。我不知道爲什麼要這樣做，我試着在mainWrap和footer上放置clear:both;，但它沒有幫助。頁腳正在分割內容

HTML -

<div id="mainWrap"> 
<h1>Welcome to ASA.</h1> 
<hr class="faded"> 
<h3>Register</h3> 
<form action="register.php" method="post"> 
    <table> 
    <tr> 
    <td><p>Username:</p></td> 
    <td><input type="text" name="user" id="user" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><p>Password:</p></td> 
    <td><input type="password" name="password" id="password" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><p>Repeat Password:</p></td> 
    <td><input type="password" name="rpassword" id="rpassword" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><p>Email:</p></td> 
    <td><input type="text" name="email" id="email" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><p>Skype Username:</p></td> 
    <td><input type="text" name="skypeuser" id="skypeuser" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><p>First Name:</p></td> 
    <td><input type="text" name="fname" id="fname" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><p>Last Name:</p></td> 
    <td><input type="text" name="lname" id="lname" maxlength="50" /></td> 
    </tr> 
    <tr> 
    <td><input type="submit" value="Register" id="submit" maxlength="50" /></td> 
    </tr> 
    </table> 
</form> 
</div> 
<div id="bottom"></div>

CSS -

#mainWrap { 
    width:960px; 
    height:auto; 
    margin:0px auto; 
    position:relative; 
    clear:both; 
} 

#bottom { 
    position:absolute; 
    clear:both; 
    left:0; 
    bottom:0; 
    background-color:#fff; 
    height:160px; 
    width:100%; 
    -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75); 
}

畫面發生了什麼 - Image of whats happening