CODEWITHSUNDEEP
csswordpressbutton
Paulius Vitkus
Paulius Vitkus

Reputation: 129

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

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>

Upvotes: 1

Views: 7807

Answers (1)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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/

Upvotes: 6

Related Questions