Just starting out with HTML and encountering some difficulties with adding a footer. The main issue is that when I add the footer, the 'form' element gets stretched all the way down until it reaches the footer - you can see an example of this here. How do I prevent it from extending beyond the body of the form?
Here's the HTML code snippet:
<body>
<div id="formWrapper">
</center>
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
<div class="push"></div></div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
And here's the relevant part of the stylesheet:
#formWrapper{
width:400px;
border:solid 5px #F1F1F1;
margin-top:300;
margin-bottom:10;
margin-right: auto;
margin-left: auto;
background-color: #AFC8DE;
padding-top: 10px;
min-height: 100%;
height: auto !important;
height: 100%;
}
html, body { height: 100%; }
.push{ background-color: #903; margin: 50px; }
.footer { height: 4em; background-color: #103; }
The line min-height: 100%; seems to be causing the stretching issue but not sure how to resolve it.