Footer won't stay down after i use float - html

Question

I'm working on a responsive website. I have tried EVERYTHING and my footer won't stay down. It's because I used float:left. I don't want it to be fixed, i want it only to appear when i scroll to the bottom of the page. This is my code:
EDIT: ok so i took position:absolute out and now it works on the pages it didn't before. but on the pages where i didn't use float:left it doesn't work anymore.
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.2em;
background-color: #24478f;
color: black;
text-align: center;
font-family: Calibri;
font-size: 4vw;
max-width: 100%;
clear: both;
}
#container figure {
width: 100%;
float: left;
display: block;
overflow: hidden;
}
...
#media only screen and (min-device-width: 1000px) {
#container figure {
width: 33%;
display: block;
overflow: hidden;
}
}
<section id="container">
<figure>
<a href="Portfolio.html#applications">
<img src="../imgs/74599-200.png">
</a>
<figcaption>Multimedia Applications</figcaption>
</figure>
<figure>
<a href="Portfolio.html#retrieval">
<img src="../imgs/info1600.png">
</a>
<figcaption>Information Retrieval</figcaption>
</figure>
<figure>
<a href="Portfolio.html#games">
<img src="../imgs/3281-200.png">
</a>
<figcaption>Computer Games</figcaption>
</figure>
</section>
<footer>
<p> Infia Abelha</p>
</footer>

Answer 1

in order to do that you can use min-height for your section like this
#container{min-height:500px}
and set footer position to relative
footer{position:relative}

Answer 2

remove position:absolute and it works
footer {
width: 100%;
height: 1.2em;
background-color: #24478f;
color: black;
text-align: center;
font-family: Calibri;
font-size: 4vw;
clear: both;
}
#container figure {
width: 100%;
float: left;
display: block;
overflow: hidden;
}
...
#media only screen and (min-device-width: 1000px) {
#container figure {
width: 33%;
display: block;
overflow: hidden;
}
}
<section id="container">
<figure>
<a href="Portfolio.html#applications">
<img src="../imgs/74599-200.png">
</a>
<figcaption>Multimedia Applications</figcaption>
</figure>
<figure>
<a href="Portfolio.html#retrieval">
<img src="../imgs/info1600.png">
</a>
<figcaption>Information Retrieval</figcaption>
</figure>
<figure>
<a href="Portfolio.html#games">
<img src="../imgs/3281-200.png">
</a>
<figcaption>Computer Games</figcaption>
</figure>
<div style="clear:both;"></div>
</section>
<footer>
<p> Infia Abelha</p>
</footer>