I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.

I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: right but it's not working. Although margin-left is working by giving a particular percentage, the same is not working when I resize the page.

Here is my Fiddle code. Any help would be great.

<div data-role=page>

    <div data-role=header data-theme=b data-position=fixed>

        <h1 style=font-size: 1.5em; text-align: left; margin-left: 70px;

            data-role=none>Test</h1>

    </div>



    <div id=contentLogin align=center name=contentConfirmation data-role=content>



        <p style=font-size: 0.85em; color: #000000>

            <b>Welcome to my page</b>

        </p>

        <br>

        <div class=ui-grid-b responsive>



            <div style=margin: 0px; margin-top: 0px; margin: 0px; class=ui-block-a>



                <div data-role=fieldcontain>

                    <label for=url class=alignleft>Username:*</label>

                    <input id=userId1 class=required name=uid_r placeholder= type=text>

                </div>

                <div data-role=fieldcontain>

                    <label for=url class=alignleft>Password:*</label>

                    <input id=Password1 class=required name=pwd_r value= type=password>

                </div>

                <button id=login data-theme=a type=button href=home.html data-mini=false data-inline=true >Login</button>



            </div>

            <div class=ui-block-b>BLOCK A ADS</div>

            <div class=ui-block-c style=margin-top: 0px;>

                BLOCK C

            </div>



        </div>

    </div>

    <div data-role=footer data-theme=b data-position=fixed>

    </div>

</div>