How to make footer stick to the bottom - html

Question

I am having a problem with my footer. I am trying to force it to the bottom, but it always looks ugly.
Here is the code:
<div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Programmer</h4>
<p class="footertext">You can thank all the crazy programming here to this guy.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Artist</h4>
<p class="footertext">All the images here are hand drawn by this man.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Designer</h4>
<p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>
</center>
</div>
</div>
<div class="row">
</div>
</div>
I tried to use
<div class="footer navbar-fixed-bottom">
but in that case my text ,which is located over the footer, get overlapped by footer
Here is css I used:
#footer {
padding-top: 100px
position: absolute;
bottom: 0;
width: 100%;
/* Sets the fixed height of the footer here */
height: 280px;
background:
/* color overlay */
linear-gradient(
rgba(240, 212, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
/* image to overlay */
url(222.png);
}
.footertext {
color: #ffffff;
}
Here is what I mean by ugly. I did try to set html and body height as 100% in css

Answer 1

Please show us what you mean by "looks ugly" so we can help you, because we can't really understand your issue.
I'd say the problem could be in what the parent of #footer div.

Answer 2

I think you only have to change position: absolute; to position: relative; or position: fixed; for the div to stay at the bottom (depending on what behaviour you exactly expect).
Side note, don't use the tag <center> because it's now deprecated, use CSS instead (text-align: center).

Answer 3

You are missing a semi-colon after padding-top: 100px . You can also try position:fixed instead of position:absolute. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Answer 4

Its <div class="footer navbar fixed-bottom">
not <div class="footer navbar-fixed-bottom">
you mistypes a -