After receiving help previously, I found my work to be extremely disorganized, making it difficult for me to follow someone else's progress. Currently, I have managed to align my content vertically, but now my footer is being cut off halfway and my social icons are incorrectly positioned next to the powered by text instead of floating to the right as intended...
HTML
<div id="footer">
<div id="footerContent">
<div id="leftFooter">
$POWERED_BY$
</div>
<div id="rightFooter">
<a href="#"><img src="http://zevoxa.com/images/social/facebook.png" /></a>
<a href="#"><img src="http://zevoxa.com/images/social/twitter.png" /></a>
<a href="#"><img src="http://zevoxa.com/images/social/youtube.png" /></a>
<a href="#"><img src="http://zevoxa.com/images/social/deviantart.png" /></a>
</div>
</div>
</div>
CSS
#footer {
background-image:url('/images/footer_bg.png');
bottom repeat-x;
height: 110px;
display:table-cell;
vertical-align: middle;
}
#footerContent {
display:table;
width:100%;
}
#leftFooter {
float: left;
font-family:maven;
font-size: 15px;
padding-left: 20px;
}
#rightFooter {
float: right;
text-align:right;
}