align elements to center in jquery mobile footer

Question

I am having hard time aligning elements inside the footer of a jQuery Mobile Page.
We have three different pieces of information to display: COPYRIGHT, VERSION NUMBER and CONNECTION STATUS. The goal is to align the footer in such a way that COPYRIGHT is left aligned, VERSION NUMBER is centered and CONNECTION STATUS is right aligned all on the same footer line.

I tried the following which unfortunately, did not work:

<div data-role="footer">
<span style="text-align:left">COPYRIGHT</span>
<span style="text-align:center">VERSION NUMBER</span>
<span style="text-align:right">CONNECTION STATUS</span>
</div>

Any suggestions how to accomplish this alignment setup? Many thanks!

Answer 1

You should use jQuery Mobile grid like this:

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            <div class="ui-grid-b">
                <div class="ui-block-a" style="text-align: left;">COPYRIGHT</div>
                <div class="ui-block-b" style="text-align: center;">VERSION NUMBER</div>
                <div class="ui-block-c" style="text-align: right;">CONNECTION STATUS</div>                
            </div><!-- /grid-a -->
        </h3>                
    </div>

And here's a working example: http://jsfiddle.net/Gajotres/e2uaU/

And style it as you want. Everything should be wrapped in h3 tag so that footer can retain its height.