How can I right align the +1 button?

Question

I read about this and I tried different strings but nothing worked for me. I have the +1 button in a div container. The container is floated right and I also tried to apply the "align:right" property for the button, but no matter what I do it just doesn't align to the right. My code is like this now:

<div class="g-plusone" data-annotation="none" align="right"></div>

I also tried to write the code like this:

<div class="g-plusone" data-annotation="none" data-align="right"></div>

and I also tried this:

<div class="g-plusone" data-annotation="none"><g:plusone align="right"></g:plusone></div>

I tried floating right the "g-plusone" div, this is the code:

.g-plusone{float:right!important;}

I feel like I'm going mad, can someone help me?

Answer 1

Add text-align:right to the container.

It tried it here, its working: http://jsbin.com/aGivuvA/1/edit

Answer 2

You need to set a width to your div otherwise the div automatically takes the width of the container so floating left or right makes no difference as the width is 100%.

UPDATE

If testing your site in Chrome or Firefox click on the web developer tools, select outline>outline block level elements. This will show the outline of your containing divs and the block level elements inside them. This gives a clue to where to start fixing your alignment issue. For example is the element right aligned in a narrow container, right aligned but 100% wide or is the alignment being overwritten elsewhere in your code.

Answer 3

Try this to use span for your g-plus button then put it inside a div, then align the div to the right....

<div class="g-plusone" data-annotation="none" align="right">
<span>

<!--your content-->
</span>

</div>

Answer 4

Don't know about google plus that much, but if this problem is because google replace the div with an iframe or something like that, then you can use the hack option of wrapping it with:

<div style="width: 100%; direction: rtl;">