CODEWITHSUNDEEP
htmlcssalignment
user3629180
user3629180

Reputation: 27

Footer elements vertical align

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
<a href="https://www.facebook.com/" target="_blank"><img src="/www/assets/newImages/footer/facebook.png"></a>
<a href="https://twitter.com/" target="_blank"><img src="/www/assets/newImages/footer/twitter.png"></a>
<a href="https://plus.google.com/" target="_blank"><img src="/www/assets/newImages/footer/google plus.png"></a>
<a href="http://www.pinterest.com/" target="_blank"><img src="/www/assets/newImages/footer/pinterest.png"></a>
<a href="http://tumblr.com/" target="_blank"><img src="/www/assets/newImages/footer/tumblr.png"></a>
</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

Upvotes: 0

Views: 83

Answers (1)

potashin
potashin

Reputation: 44601

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

Upvotes: 2

Related Questions