css footer doesn't remain at the end of the content - html

Question

I have a website and I want to put a footer at the end of each page.
The page login has content, but the footer doesn't remain at the end of it.
login
<div class="login">
<form id="loginForm" method="POST" action="<?php echo URL; ?>Login/run">
<li>
<label>
Username:
</label>
<input type="text" name="username"/>
<span class="errorMessage"></span>
</li>
<li>
<label>
Password:
</label>
<input type="text" name="password"/>
<span class="errorMessage"></span>
</li>
<li>
<label>
Type:
</label>
<select name="typeOfUser">
<option value="1">Restaurant</option>
<option value="2">Customer</option>
</select>
</li>
<li>
<label></label>
<input type="submit" value="Login"/>
</li>
</form>
</div>
css
.login{
position: relative;top: 100px;
margin-left: 280px;
}
.login li{
list-style: none;
padding-bottom: 10px;
}
.login label{
color: blue;
display: inline-block;
width: 100px;
}
.login input{
padding: 0.4em;
}
.login select{
padding: 0.4em;
}
footer
#footerContent{
position: relative;
bottom: 0px;
width: 100%;
height: 48px;
background-color: #646467;
}

Answer 1

change your login div css to
.login{
position: relative;
margin-top: 100px;
margin-left: 280px;
}
and footer will come after login div.
Check this jsfiddle
hope it helps

Answer 2

try this
#footerContent{
position: absolute;
bottom: 0;
width: 100%;
height: 48px;
background-color: #646467;
}