My code snippet is located at http://jsfiddle.net/kXesZ/. I am trying to align the two social media icons to the bottom edge of a background image but I am having trouble getting them to display inline. I've attempted various methods such as using display:block-inline, float:left/right assignments, etc., but they just keep moving around without aligning properly.
What could I be missing here?
HTML
<div class="footer">
<div class="left">
<h3>Title</h3>
<p>
Lorem ipsum
</p>
</div>
<div class="right">
<h3>Title</h3>
<p>Title</p>
<p>
<b>Telephone:</b> 012345678<br/>
<b>E-mail:</b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88e9eaebc8e9eaeba6ebe7e5">[email protected]</a>
<p>
<div class="social">
<a href="http://facebook.com" title="" id="facebook">Facebook</a>
<a href="http://twitter.com" title="" id="twitter">Twitter</a>
</div>
</div>
CSS
body { font:14px Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; color:#282828; text-align:left; }
.footer { background:url('http://i.imgur.com/AhHgSJr.jpg') no-repeat; padding:5px; width:984px; height:268px; }
.footer .left { display:block; width:252px; float:left; padding:98px 0 0 40px; }
.footer .right { display:block; width:252px; float:right; padding:98px 40px 0 0; }
.footer h3 { color:#a0cf67; font-size:21px; font-weight:bold; }
.footer p { padding:0 0 26px 0; }
.footer .social #facebook { background:url('http://i.imgur.com/g20ltEP.png') no-repeat; float:left; display:block; width:59; height:55px; overflow:hidden; text-indent:100%; white-space:nowrap; }
.footer .social #twitter { background:url(http://i.imgur.com/xteWM7e.png) no-repeat; display:block; width:58px; height:45px; overflow:hidden; text-indent:100%; white-space:nowrap; }
.footer-container .bottom-container { text-align:center; }