bayman bayman - 5 months ago 23
CSS Question

How to align social like buttons next to copyright text inside footer?

I followed this example from a github gist to align social like buttons at the same height but I am not sure why it's not aligning next to my copyright text. It's showing the buttons under new row but I'd like it to show on the same row as the copyright text. I am also using Bootstrap for this. How do I fix this?

html:

<footer class="footer">
<div class="container">
<span class="copyright text-muted">Copyright ©2016 example.com. All Rights Reserved</span>
<div class="social">
<span class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.example.com">Tweet</a>
</span>
<span class="Facebook"><iframe src="https://www.facebook.com/plugins/like.php?href=https://gist.github.com/thebigreason/1296097&amp;show_faces=false&amp;layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe>
</span>
<span class="google">
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>
</span>
</div>
</div>
</footer>


css:

.footer {
position: absolute;
bottom: 30px;
width: 100%;
/* Set the fixed height of the footer here */
height: 0px;
background-color: transparent;
}
/* This gets Google to fall into place */
.social {
font-size: 1px;
}
/* This gets Facebook to fall into place */
.social iframe {
vertical-align: bottom;
}
/* Set an optional width for your button wrappers */
.social span {
display: inline-block;
width: 110px;
}
/* Adjust the widths individually if you like */
.social .google {
width: 75px;
}


jsfiddle

Answer

Just add this css.

.container span, .container .social {
  display: inline-block;
}
Comments