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

Is there any way to align google plus button to right? It seems that g+ button holds s开发者_StackOverflow中文版ome 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

---

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.

---

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.

---

Add the following attribute to the g:plusone tag:

align="right"

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

---

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

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

---

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;
}

---

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

---

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.