title: Vertically aligning footer content
body: <p>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...</p>
  
  <p><a href="http://jsfiddle.net/4KDEM/" rel="nofollow">http://jsfiddle.net/4KDEM/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="footer"&gt;
   &lt;div id="footerContent"&gt;
   &lt;div id="leftFooter"&gt;
   $POWERED_BY$
   &lt;/div&gt;
   &lt;div id="rightFooter"&gt;
   &lt;a href="#"&gt;&lt;img src="http://zevoxa.com/images/social/facebook.png" /&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;img src="http://zevoxa.com/images/social/twitter.png" /&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;img src="http://zevoxa.com/images/social/youtube.png" /&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;img src="http://zevoxa.com/images/social/deviantart.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>