Footer not staying at bottom of page after a form - html

Question

I am having a problem with the placement of my footer on my contact page. On every other page of my site the Footer is correctly placed at the bottom of the page, but for some reason the footer is sitting ABOVE my form, even covering the first input box. Can someone please help me?
Here is the coding for my contact form:
footer {
display: block;
clear: both;
font-size: 0.8em;
height: 50px;
text-align: center;
width:960px;
margin: auto;
position: absolute;
}
footer .footer-wrapper {
margin: 0;
padding: 3px 20px;
}
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
<section>
<div>
<form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
<td>Name: </td>
<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
<td>Mobile: </td>
<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
<td>Enquiry: </td>
<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Send" />
<input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</form>
</div>
</section>
<footer>
<div class="footer-wrapper">
<div class="float-left">
<p>© My-Com Computers</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>

Answer 1

you missed table close tag your html </table>
<section>
<div>
<form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
<td>Name: </td>
<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
<td>Mobile: </td>
<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
<td>Enquiry: </td>
<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Send" />
<input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</table><!-- new added-->
</form>
</div>
</section>
here is your output https://jsfiddle.net/mxmd5jq9/

Answer 2

You forgot to close the table tag
<section>
<div>
<form name="customerForm" method="post" action="?">
<table cellspacing="3" cellpadding="5" border="0" style="width: 95%;" align="center">
<tr>
<td>Name: </td>
<td><input type="text" name="cusName" size="25" value="<?php echo $fullName; ?>" /></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" name="cusEmail" size="30" value="<?php echo $emailAddress; ?>" /></td>
</tr>
<tr>
<td>Mobile: </td>
<td><input type="text" name="cusMobile" size="25" value="<?php echo $mobilePhone; ?>" /></td>
</tr>
<tr>
<td>Enquiry: </td>
<td><textarea name="posting" cols="52" rows="25"><?php echo $posting; ?></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Send" />
<input type="reset" name="reset" value="Clear Form"/></td>
</tr>
</table>
</form>
</div>
</section>