jQuery mobile button alignment issue

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> ```