Footer shows up in the middle of the page? - html

Question

My footer doesnt show up at the bottom, it does on all the other pages except this one(code below). the content in the footer shows up at the bottom(wrong positions of the component, but still at the bottom) but the backgroud color is in the middle of the page.
Here is the code:
<footer id="fots">
<div id="infof">
<div id="infoc">
<ul class="ulfot" id="ulfk">
<li><b>Destinatons</b></li>
<li>London</li>
<li>Sarajevo</li>
<li>Istanbul</li>
<li>Gothenburg</li>
</ul>
<ul class="ulfot">
<li><b>Flight info</b></li>
<li>Before flying</li>
<li>When flying</li>
<li>After flying</li>
</ul>
</div>
</div>
<div id="fotsd">
<div id="leftis">
<p><b> &copy something </b></p>
</div>
<div id="rightis">
Back to top <span class="glyphicon glyphicon-arrow-up"></span>
</div>
</div>
</footer>
here is the css:
#infoc{
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#fots{
background-color: #ebebeb;
width: 100%;
}
#fotsd{
height: 50px;
padding-top:15px;
padding-left: 5px;
padding-right: 5px;
width: 960px;
display: block;
margin-left: auto;
margin-right: auto;
}
#leftis{
width: 300px;
float: left;
font-family: 'Raleway', sans-serif;
}
#rightis{
width: 300px;
float: right;
text-align: right;
color: black;
font-family: 'Raleway', sans-serif;
}
#bks{
color: black;
}
#infof{
width: 100%;
height: 180px;
background-color: gray;
}

Answer 1

If I understand correctly this is what you want: FIDDLE
change this CSS
#fots{
background-color: #ebebeb;
width: 100%;
}
to this:
#fots{
background-color: #ebebeb;
width: 100%;
position:fixed; /*new*/
bottom:0;/*new */
}
and change this CSS:
#infof{
width: 100%;
height: 180px;
background-color: gray;
}
to this:
#infof{
width: 100%;
/*height: 180px;*/ /*removed*/
background-color: gray;
}

Answer 2

#fots {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: #ebebeb;
}
Setting the position to absolute should keep it on the bottom, according to this source (first google result..)