Google+ button remove free space/margin to the right | align to right

Question

Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.

update
It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.

update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters

Seethe

Answer 1

Nowadays you just add data-align="right" to your <div>. For example:

<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>

That will keep the contents of the <iframe> aligned to the right.

Tedie

Check out date question has been posted. Since then google+ api has changed several times and question is no longer valid. – Seethe

It's an old question, but I still got here because I couldn't figure out how to right align the Google+ button, so in order to help others it makes sense to put it here. – Tedie

Answer 2

If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes

Now that the padding is gone on the right side you can use CSS to align the button.

Stevestevedore

Answer 3

Add the following attribute to the g:plusone tag:

align="right"

Got the solution from https://developers.google.com/+/plugins/+1button/#button-sizes

Extractive

Answer 4

Set the align attribute to right for the +1 button tag.

<g:plusone align="right"></g:plusone>

Merocrine

Since I asked this question Google+ button has changed (many times). This option did't exist year ago. :) – Seethe

Answer 5

The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.

<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium"  data-align="left"></div></div>

.plusonealign {
    float: left;
}

Techno

Answer 6

I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.

Bilicki

What will happen if the webpage will get (in some time) a 4 digit count of +1s? I don't want to manuall update width of this div every once in a while. – Seethe

Answer 7

encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.

you could always use a stylesheet to override the inline styles that google send down the wire

so for markup like this:

<div class="myPlusOneWrapper">
    <div id="theActualPlusOneWrapper" style="whatever google send down the wire">
        <!-- blah -->
    </div>
</div>

you could have this CSS:

.myPlusOneWrapper
{
     float: right;
}

.myPlusOneWrapper > div
{
    width: auto !important;
}

the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style

JS Fiddle

Pinfold

I can't get it working. Could you please show an example? jsfiddle perhaps. – Seethe

what browser are you using? the > descendent selector will only work in newer browsers (IE8+, most other browsers have supported for a while) – Pinfold

hmmm after much futile trying, the only thing i could get to work was to set an explicit width on the wrapper (i feel like a failure haha). Do you really think you'll have that many plus 1's that you won't have time to resize periodically with a simple change to css? jsfiddle.net/j65Wu – Pinfold

I've got 5 000 000 unique visits a day on all corporate websites. Every article on every website can be liked or +1. Theres no way I'm going to update it manually. – Seethe

5 million uniques a day?! impressive figure! hmmm, could you then just turn off annotations so that the numbering isn't an issue? my guess is that it's not easy to do as a ifrst assumed. he fact that google send an explicit width down the wire says it all, they haven't got it resizing dynamically! or just set the width to be big enough to accomodate up to a million +1's (a fair upper bound). that would probably only need 100 pixels of space to the right for example – Pinfold

also, my example does align it to the right (albeit with lots of padding to accomodate +1 tally). could you please mark as answer? – Pinfold

Sorry, it's not the answer I'm looking for. – Seethe

@Seethe let us continue this discussion in chat – Pinfold

i have done a little further investigation and it seems google themselves limit the size of the numbers next to the button to 57px (this would allows for allows for 6 characters, or up to 9,999,999 +1's - more than you'll receieve for a single page!). Thus i think its fair to simply set an explicit width on the wrapping div to align to the right better? what do you think? if you use firebug to edit the value in the pop-out you will see it accomodates a 6 figure number. jsfiddle.net/j65Wu/1 – Pinfold