How can I align the G+ button and facebook like button the same row?

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 righ开发者_JAVA百科t under the image on my main page.

Here is my site 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!

I use G+1 medium size, and I added this code in css. It aligns facebook, twiter and google +1 on same line.

#___plusone_0, #___plusone_0 iframe {
 display:inline !important;
 height:23px  !important;
}

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!

Use the "medium" size Google +1 button, and add this to your css:

div#___plusone_0 {
  vertical-align: bottom !important;
}

div.social{ 
    width:147px;
    height:23px;
    float:right;
    vertical-align:top !important;
}

try to change the DIV tags to SPAN and probably will since span tags can be inline

more info: https://developers.google.com/+/web/+1button/

Your link and the code posted don't match up so I am going off the link provided.

You have both your +1 button and facebook button jammed into a div that is 60px. You need a width of at least 38p + 47px = 85px to fit both. Since there isn't enough room for the floated facebook div it falls beneath.

In conclusion increase the containing divs width. Which would be this div below:

<div style="float:left; width:60px; float:left; padding-left:400px;">

PS: Hi r/trees

css:

.social
{
    display:inline-block;
    font-size: 1px; /*very important for G+ button*/
    /*vertical-align:middle*/
}