Footer elements vertical align - html

Question

I'm trying to make this footer, where every element is vertically aligned. But for some reason, copyright for example isn't vertically aligned.
Can anyone help me finding out what is wrong? Or what I am missing?
Footer HTML:
<div id="footerSocial">
<div id="socialNetwork">
Connect with us
<img src="/www/assets/newImages/footer/facebook.png">
<img src="/www/assets/newImages/footer/twitter.png">
<img src="/www/assets/newImages/footer/google plus.png">
<img src="/www/assets/newImages/footer/pinterest.png">
<img src="/www/assets/newImages/footer/tumblr.png">
</div>
<div id="footerNewsletter">
Subscribe to Newsletter
<input id="subscribeNewsletter" name="email" type="text">
<input id="subscribe_ok" type="image" src="/www/assets/newImages/footer/Ok.png" onclick="saveNewsletter(this);">
</div>
<div id="copyright">
Copyright 2013 - Dreaming Different
</div>
</div>
Footer CSS:
#footerSocial {
display: inline-block;
text-align: center;
width: 100%;
margin-top: -25px;
}
#socialNetwork {
display: inline-block;
float: left;
font-size: 10px;
color: #747474;
}
#footerNewsletter {
display: inline-block;
margin: 0 auto;
font-size: 10px;
color: #747474;
}
#footerNewsletter #subscribe_ok {
margin-bottom: -5px;
}
#copyright {
display: inline-block;
float: right;
font-size: 10px;
color: #747474;
}
#footerSocial {
border: 1px solid black;
}
#socialNetwork {
border: 1px solid green;
}
#footerNewsletter {
border: 1px solid red;
}
#copyright {
border: 1px solid blue;
}
Fiddle Demo

Answer 1

You can use a table layout to achieve what you want :
#footerSocial { display: table; text-align: center; width: 100%; font-size: 10px;color: #747474;}
#footerSocial > div {display: table-cell; }
#footerNewsletter #subscribe_ok { margin-bottom: -5px; }
#footerSocial { border: 1px solid black; }
#socialNetwork { border: 1px solid green; }
#footerNewsletter { border: 1px solid red; }
#copyright { border: 1px solid blue; }
Example