Put images at the top of footer - html

Question

I am a novice to learning HTML and CSS. I want to add images at the top of footer. How can I achieve it.
I have the footer created and the images in one line. But somehow i don't know how to place them at top of the footer. The HTML and CSS are below. Using stylesheet from bootstrap.
<id ="image">
<img src="images1.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;" />
<img src="images2.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images3.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images4.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images5.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
</id>
<footer id="footer">
<div class="container">
<p>some text for the footer</p>
</div>
</footer>
The CSS used is below.
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align:center;
background-color: #f5f5f5;
}
#image {
position: relative;
bottom: 0;
width: 100%;
}

Answer 1

Try something like this:
http://codepen.io/anon/pen/bVeQyb
<div id="images">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
<img src="http://placehold.it/80x80.png">
</div>
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align:center;
background-color: #f5f5f5;
}
#images {
text-align: center;
position: absolute;
bottom: 80px;
width: 100%;
}
#images a{
display: inline-block;
margin: 0 10px;
}

Answer 2

One method would be to position your images absolute as well. Code below:
<div id="image">
<img src="images1.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;"/>
<img src="images2.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images3.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images4.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
<img src="images5.png" align="left" style="width:20%;height:200px;margin:auto;padding:75px;">
</div>
<footer id="footer">
<div class="container">
<p>some text for the footer</p>
</div>
</footer>
#image {
position: absolute;
bottom: 60px;
width: 100%;
}
2nd method: Place your images inside the footer, in this case you need to change the footer height, since it is absolute positioned.
3rd method: Simply leave the footer in the content flow. Remove the absolute positioning.