Question

I’m fairly new to html and all that jazz so I might be misusing certain code.

I want to put the G+1 button and facebook like button next to each other and also centered right under the image on my main page.

Here is my site http://www.entitee.org
And the appropriate block of code (I hope)

<div class="socialmedia">
<div style="float:left; padding-left:400px;">
<div id="gplus"></div><g:plusone count="false"></g:plusone>

<div style="width:47px;overflow:hidden;float:right;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=137562953001123&amp;xfbml=1"></script>
<fb:like layout="button_count" href="http://www.facebook.com/pages/ENTiTEE/162658567144308" send="true" width="225" show_faces="false" action="like" font=""></fb:like>
</div>
</div>
</div>

I’m not sure if I’m misusing the div style or div align items but I can’t seem to get it with padding or anything.

Thank you!

Answer 1

I looked at the code on your site and here are some steps you could take and would get you in the right direction:

1. remove the float:left from the style attribute for the google plus button
2. add this to BOTH the facebook and google plus div’s style tag display:inline-block;
3. your div that has the class set to class=”socialmedia” has an inner div that has the width set to 60 px make it bigger maybe 100 px

Those steps should get them together on the same line. As always test your site in more then one browser. Good luck!