Google+ button removes free space / field on the right | align right

Question

Is there a way to align the google plus button on the right? The g + button seems to hold some place if there were more digits. It would be nice if sulution could only use css / html - without javascript.

update
A message appears stating that Google has changed a bit of the 1+ button api from yesterday, but it still seems impossible to align it to the right.

update 2
The question was asked on August 24, 2011. Since then, Google+ has changed several times. There is no need for spamming answers to this post anymore (repeated, same answers!). The options that you all offered did not exist at that time. Check the options on the Google + documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters

Answer 1

Currently you are just adding 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> 

This will cause the contents of the <iframe> be aligned to the right.

Answer 2

If you want to align the +1 button on the right, you must either use the “high” form factor as it expands, or adjust the +1 button so that the score is not displayed. Any of them will remove the free space for numbers on the right side. Documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes

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

Answer 3

Add the g: plusone tag of the following attribute:

 align="right" 

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

Answer 4

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

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

Answer 5

The easiest solution I've found is to simply wrap plus one div element in the container, give the container a class and style that will float as you need.

 <!-- Google +1 button --> <div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div> .plusonealign { float: left; } 

Answer 6

I would put a button in a div . Then I would make this div smaller than the button to cut off the right side of the button. You need to adjust the position and overflow parameters in your css.

Answer 7

ran into this exact problem yesterday. wrapped with the name namedpaced plus one tag in the div and floated to the right.

you can always use the stylesheet to override the inline styles that google cable

therefore for markup:

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

you can have this CSS:

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

the width will then be adapted as broadly as it should be, and will take precedence over Google's inline style

Js feed