How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?


Tags: css,wordpress,button,social

Problem :

I have internet portal, based on WordPress. There is one Facebook Like button (align - right), but when I am trying to integrate on the right other buttons (Twitter, LinkedIn and Google+), they are going to left side. I don't know how to align on the right them all. Don't have much knowledge about CSS, so that's why i'am asking help.

This is how is now:

This is how I want it to be:

This is my single_post.php code:

<?php the_content(); ?>
<div class="clear"></div>
<?php wp_reset_query(); ?>
<?php wp_link_pages('before=<p class="pagination">&after=</p>'); ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/lt_LT/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>  
<div class="fb-like" data-send="false" data-layout="box_count" data-width="700" data-show-faces="false" data-font="lucida grande"></div>    
<div class="clear"></div>
</div>


Solution :

Hey i think you should do this

Define float properties in your socail icon and define margin padding width height according to your design

Css

.social{
float:right;
    border:solid 1px green;
}
.fb, .twit, .share, .gplus{
float:left;
    width:100px;
    height:100px;
    overflow:hidden;
    border-left:solid 1px red;
}

HTML

<div class="social">
    <div class="fb">FB</div>
    <div class="twit">TWIT</div>
    <div class="share">Share</div>
    <div class="gplus">Gp</div>
</div>

Live demo http://jsfiddle.net/3ELc5/


    CSS Howto..

    CSS - How to auto adjust DIV height according to next sibling height?

    How to position the scaled elements (jQuery, css)

    How to position 3 images in two equal height columns?

    How to make circles repeat in the background of an element in full CSS?

    With CSS, how do you unhighlight a link after clicking a different link?

    How to create a dynamically sized form background with CSS?

    how to change html content text

    using css

    why image show space and go right, it should be fill up the gap

    How to HTML/CSS Limit / Clip / Mask an object?

    How to remove margin on horizontal list line break?

    How to change text (not font size) according to screen size in CSS?

    Meteor: how to style useraccounts

    How to apply CSS using User Scripts

    How to assign color obtained by CSS gradient generator

    How to create a mobile navigation toggle using pure CSS?

    how can I fetch a website and overwrite some ot its html and css [closed]

    How can I get the seletced filename from file button?

    How to add/insert json data[0] etc to/in jquery $('td').css?

    How to remove string that dosn't have an html tag using CSS

    How to apply CSS(background image) to radiobutton when it clicks?

    How to hide a div off the viewport responsively, and always showing the bottom 50px?

    How to make CSS for search results

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    Why is my text not showing in my DIV?

    How to move/position DIV container by changing CSS values using Javascript?

    How to solve this (seemingly simple) formatting problem in CSS?

    How to create this type of element using XHTML & CSS?

    How to make text box scroll vertical in overflow css html?

    Basic CSS Question: How to specify height of background image of div?

    How To Style background-image CSS