Sticky footer elements not aligning - html

Question

Really simple issue. Fished around the site a bit, nothing seems to work.
I have a sticky navigation on the bottom of my site that isn't sticking to the bottom! It isn't respecting my height rules and is overflowing without regards.
Things I've tried:
Clearfix
Overflow
Table display
Tried everything i know of honestly.
What i'm aiming for visually:
Fiddle Link
CSS / HTML / Demo
.fn {
width: 100%;
height: 100%;
max-height: 41px;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.fn ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
.fn li {
display: inline-block;
}
.fn a {
display: block;
padding: 10px 5px 10px 30px;
text-decoration: none;
font-family: "Raleway", sans-serif;
font-size: 1.15em;
letter-spacing: 0.05em;
color: #000;
}
.fn .first {
margin-right: 45.5px;
background-image: url(http://s28.postimg.org/f3f2a8mnd/fi2.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
top: -14px;
position: relative;
}
.fn .mid {
height: 55px;
bottom: 0;
margin: 0 auto;
z-index: 9998;
}
.fn .mid img {
height: 100%;
display: inline-block;
}
.fn .second {
margin-left: 45.5px;
background-image: url(http://s28.postimg.org/ag908gzah/fi1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
top: -14px;
position: relative;
}
<div class="fn">
<ul>
<li> Resume
</li>
<li class="mid">
<img src="http://s18.postimg.org/v70ga0bvt/image.png"></img>
</li>
<li> Contact
</li>
</ul>
</div>

Answer 1

You have to change absolute position to fixed and vertical align li elements top.
.fn {
width: 100%;
height: 100%;
max-height: 50px;
bottom: 0;
left: 0;
position: fixed;
background-color: #fff;
}
.fn ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
.fn li {
display: inline-block;
vertical-align: top;
}
.fn a {
display: block;
padding: 10px 5px 10px 30px;
text-decoration: none;
font-family:"Raleway", sans-serif;
font-size: 1.15em;
letter-spacing: 0.05em;
color: #000;
}
.fn .first {
margin-right: 45.5px;
background-image: url(http://s28.postimg.org/f3f2a8mnd/fi2.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
position: relative;
}
.fn .mid {
height: 55px;
bottom: 0;
margin: 0 auto;
z-index: 9998;
}
.fn .mid img {
height: 100%;
display: inline-block;
}
.fn .second {
margin-left: 45.5px;
background-image: url(http://s28.postimg.org/ag908gzah/fi1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
position: relative;
}
.fn li:first-child, .fn li:last-child {
padding-top: 10px;
}
Fiddle: http://jsfiddle.net/mcwo8qvz/7/

Answer 2

hello just make your fn class div to position fixed and expand your max-height to 55 px
here is jsfiddel = http://jsfiddle.net/mcwo8qvz/2/
.fn {
width: 100%;
height: 100%;
max-height: 55px;
bottom: 0;
left: 0;
position: fixed;
background-color: #fff;
}