Buttons - Side by Side

by Omar X

HTML

<div data-role="page" data-theme="b">
    <!-- header -->
    <div data-role="header" data-theme="d" data-position="fixed">
         <h1>Header</h1>

    </div>
    <!-- content -->
    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a"><a href="#" data-role="button" data-mini="true" data-icon="check">Button one</a>

            </div>
            <div class="ui-block-b"> <a href="#" data-role="button" data-mini="true" data-theme="c">Button two</a>

            </div>
        </div>
    </div>
    <!-- footer -->
    <div data-role="footer" data-position="fixed" data-theme="d" class="ui-bar">
<a href="#about" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="flip" data-icon="info" data-theme="e">About</a>

    </div>
    <!-- About Author Popup -->
    <div data-role="popup" id="about" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:300px;" class="ui-corner-all"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

        <div data-role="header" class="ui-header ui-bar-c">
             <h1>About Author</h1>

        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <p>Demonstration was created by <b>Omar</b> for <a href="#">StackOverflow.com</a>.
                <br/>
                <br/>For more examples on jQuery Mobile, click the button below.</p> <a href="http://stackoverflow.com/users/1771795/omar" data-role="button" data-theme="c" target="_blank">Profile</a>

        </div>
    </div>
    <!-- /About -->
</div>

CSS

.ui-block-a {
    width: 75% !important;
}
.ui-block-b {
    width: 25% !important;
}