position absolute and overflow hidden overlapping content - overflow

Question

I have four divs in a row and then under this the footer, however the footer moves behind the images instead of directly underneath the div.
I think it is something to do with the positioning but can't work out how to stop the overlapping.
Any help would be appreciated,
Cheers
<div id="image-nav">
<div id="image-nav1">
education
</div>
<div id="image-nav2">
repairs
</div>
<div id="image-nav3">
finance
</div>
<div id="image-nav4">
gold
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-wrap">
<div class="section group">
<div class="col span_1_of_3">
links
</div>
<div class="col span_1_of_3">
details
</div>
<div class="col span_1_of_3">
newsletter
</div>
</div>
</div>
</div>
</div>
#image-nav{
width:100%;
background:#C03;
position:relative;
}
#image-nav1{
background:#0FF;
width:25%;
position: absolute;
}
#image-nav2{
background:#069;
width:25%;
position: absolute;
left: 25%;
}
#image-nav3{
background:#FF0;
width:25%;
position: absolute;
right: 25%;
}
#image-nav4{
background:#999;
width:25%;
position: absolute;
right: 0;
}
#footer{
width:100%;
background:#F9F;
}
EDIT - Adding overflow:hidden to the parent div makes it disapear and the footer has not be fixed to the bottom

Answer 1

to fix this overlap the parent element must have a set width and height.
#image-nav{
height:18px;
}
must be added for overflow:hidden to work

Answer 2

Updated Answer
#footer{
position: absolute;
bottom: 0;
}
Try this to fix the bottom fixed.
Try to change id to footer element it is useful.Or use predefined clearfix to the footer div.
jsfiddle.net/pgamj71f/5