How to align like-buttons on my website between <div> elements and put a white background to them?

Question

my like buttons are above my page-body , they are in the right position but are aligned with   and the code is ugly. I would also need to add a white background only to the like-buttons because I will make them float with the page if you will scroll down and for this I also need to set a "div id" to the like-buttons. How can I align the like-buttons with CSS in the same position they are now and set a "div id" to them ? I also need them to be aligned vertically because facebook button is a little bit lower than google and twitter. For example, if you access this page: http://www.cumseface.eu/viewtopic.php?t=187 , you can see the like-buttons just below the ad. I`m a beginner at CSS and HTML so if you can help please be specific. Sorry for my bad english and thanks in advance.

And here is the HTML code that I`m using for the part with the buttons:

<div class="topic-actions">

<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
    <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
<!-- ENDIF -->
</div>

<!-- IF S_DISPLAY_SEARCHBOX -->
    <div class="search-box">
        <form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
        <fieldset>
            <input class="inputbox search tiny"  type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_TOPIC}" onclick="if(this.value=='{LA_SEARCH_TOPIC}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_TOPIC}';" />
            <input class="button2" type="submit" value="{L_SEARCH}" />
            {S_SEARCH_LOCAL_HIDDEN_FIELDS}
        </fieldset>
        </form>
    </div>
<!-- ENDIF -->

    <div class="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<fb:like href="{U_PAGE_URL}" show_faces="false" data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="g-plusone" data-size="medium"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CumsefaceEU" data-lang="ro">Tweet</a>

    <!-- IF PAGINATION or TOTAL_POSTS -->
        <div class="pagination">
            <!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --><a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->{TOTAL_POSTS}
            <!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> &bull; <a href="#" onclick="jumpto(); return false;" title="{L_JUMP_TO_PAGE}">{PAGE_NUMBER}</a> &bull; <span>{PAGINATION}</span><!-- ELSE --> &bull; {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
        </div>
    <!-- ENDIF -->

  </div>
</div>
<div class="clear"></div>

EDIT: I edited the code to look like this:

    <div id="likebuttons"><fb:like href="{U_PAGE_URL}" show_faces="false"  
    data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="g-plusone" data-size="medium"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CumsefaceEU" data-lang="ro">Tweet</a>
</div>

And added CSS like this:

#likebuttons {
margin-left: 147px;
width: 350px;
background: #FFF;
text-align: center;
float: left;
padding: 2px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px; 
z-index: 10;
}

But the "Facebook" button is not in line with others 2. Can that be solved ? Thank you.

SOLVED: with the facebook button, added this code in CSS:

.fb_iframe_widget { vertical-align:top;}

Answer 1

There is a great website for this. I use it all the time:

Its called Share This: http://www.sharethis.com/get-sharing-tools/#sthash.0aAa3jqv.dpbs

Get the code for the buttons on your website it will look something like this:

<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>

Then with css you can style those respectively the way you want it.

UPDATE:

In your code you have an error:

<div class="text-align: center;">

text-align:center; is a style not a class... you need to first make to say <div style="text-align: center;"> or make it a class and add styles in your css:

Next, remove all the   in the code near the buttons.

Then add this to your css to style the FB like button and twitter to give it some margin:

.fb_iframe_widget {margin-right:25px;}
.twitter-share-button {margin-left:25px;}