Vertically aligning footer content - html

Question

So, I had help from before, but my stuff was so unorganized, that it was hard for me to understand what someone was doing. It left me off here, I have my vertical alignment, but now my footer for some reason cuts off half way and my social icons stay right beside my powered by even though they're suppose to be aligned/floating to the right...
http://jsfiddle.net/4KDEM/
HTML
<div id="footer">
<div id="footerContent">
<div id="leftFooter">
$POWERED_BY$
</div>
<div id="rightFooter">
<img src="http://zevoxa.com/images/social/facebook.png" />
<img src="http://zevoxa.com/images/social/twitter.png" />
<img src="http://zevoxa.com/images/social/youtube.png" />
<img src="http://zevoxa.com/images/social/deviantart.png" />
</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;
}

Answer 1

You can fix the layout by adjusting your CSS as follows:
#footer {
background-image:url('http://zevoxa.com/images/footer_bg.png');
bottom repeat-x;
width:100%;
height: 110px;
}
#footerContent {
display:table;
width: inherit; /* You can adjust this depending on other design factors*/
height: inherit;
}
#leftFooter {
display:table-cell;
vertical-align: middle;
font-family:maven;
font-size: 15px;
padding-left: 20px;
border: 2px dotted yellow; /* just to show where the edges are*/
}
#rightFooter {
display:table-cell;
vertical-align: middle;
text-align:right;
border: 2px dotted yellow;
}
See Fiddle: http://jsfiddle.net/audetwebdesign/Pfrj8/
Set #footerContent to display: table and inherit the height from the parent element (#footer). You can set the width in a variety of ways depending on what you need. In my example, I set it to full width, default behavior.
For the two child elements, set their display type to table-cell and vertical-align: middle, you already have text-align set the right way. By default, the two cells will be of equal size, 50% of the parent's width.
No need for floats.
Aside
You may not need the two wrappers, #footer and #footerContent unless you need the second div for some other purpose (extra background image for example). Depends on other factors in your design. (See second example in fiddle.)

Answer 2

If your site isn't a responsive site, you just need to add a width like so: #footer {width:500px;}