footer at the bottom with horizontal line - html

Question

I am trying to put footer at the bottom with a horizontal line just above the footer. But I am not even able to get footer at the bottom. Tried many posts and blogs but I am missing out on something. I am using the base of some blog to create the signup page.
Fiddle
html
<div id="header">
</div>
<div id="main">
<div id="container">
<form action="index.html" method="post">
<p id="form_title" style='color:#808080'>Create an Account</p>
<fieldset>
<legend style="color:#585858">Get started with Your Profile</legend>
<label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
<input type="text" id="name" name="user_name" style="color:#404040">
<label for="type" style='color:#808080;font-size:14px'>TYPE</label>
<select id="sel-type" name="type">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</select>
<label for="type" style='color:#808080;font-size:14px'>REGION</label>
<select id="sel-region" name="region">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</select>
</fieldset>
<button type="submit">Create Profile</button>
</form>
</div>
</div>
<div id="footer">
About
Instructions
Encountered an issue?
</div>
css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato';
background-color: #E8E8E8;
}
#header {
width:100%;
background-color: #27272D;
height: 50px ;
border:1px solid;
position:relative;
}
#main{
border:1px solid;
width:100%;
height:100%;
}
#container{
margin-top: 100px;
border:1px;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
border-radius: 3px;
background-color: white;
border:1px;
}
#form_title {
margin: 10px 0 30px 15px;
font-size:20px;
}
input[type="text"],
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 20px;
}
input[type="text"]{
border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
height:44px;
font-size: 14px;
}
select {
padding: 6px;
height: 44px;
border-radius: 2px;
}
button {
color: #FFF;
background-color: #13ABAF;
font-size: 14px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 96%;
height:44px;
border: 1px solid;
border-width: 1px 1px 3px;
margin-bottom: 10px;
margin-left: 10px;
}
fieldset {
border: none;
}
legend {
font-size: 17px;
margin-bottom: 24px;
}
label {
display: block;
margin-bottom: 8px;
}
label.light {
font-weight: 300;
display: inline;
}
#horizontal-line{
display: block;
margin-top:100px;
margin-bottom: 60px;
width:96%;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
#footer {
position : absolute;
bottom : 0;
height:60px;
margin-top : 40px;
text-align: center ;
font-size: 10px ;
font-family: 'Lato' ;
}
#media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}

Answer 1

For your css, try
#footer {
position: relative;
...
}
Also for the horizontal line just use
<hr>
html tag above footer
(sorry about that, my editing looks awkward because stackoverflow prints out a horizontal line whenever I use that tag)
Also its more simple and if you want minimal changes to css.
http://jsfiddle.net/750h2crz/7/

Answer 2

I would simply use separate tag for footer sec and use Horizontal Rule tag
<div id="footer">
<hr>
<footer>
About
Instructions
Encountered an issue?
<footer>
</div>
Thx

Answer 3

Remove the position: absolute in your style:
#footer {
position: absolute;
/* ... */
}
FIDDLE: https://jsfiddle.net/lmgonzalves/750h2crz/2/

Answer 4

put this in your css, and use a border instead of a horizontal line.
footer {
position: absolute;
bottom: 0;
height: 60px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #FFF;
}

Answer 5

updated your css with
#footer {
position:fixed;
width:100%; /* fill the whole width of the screen */
border-top:1px solid #aaa; /* you can change to whatever color you want */
padding-top:10px; /* add some spacing between line and links/text */
background:#fff; /* this is important otherwise your background will be transparent, change the color based on your needs */
/* ... your other properties */
}
Also updated you body styling with some padding at the bottom to offset the footer
body {
/* ... your other properties */
padding-bottom:65px;
}