How to place 2 listviews horizontally in jquerymobile form

Question

The documentation works great on buttons using data-role = "horizontal"

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-grouped.html

but it doesn't work for Listviews http://jsfiddle.net/sHtfY/

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <div data-role="controlgroup" data-type="horizontal">
            <ul data-inset="true" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Destination" data-inset="true">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Cherry</a></li>
                    <li><a href="#">Cranberry</a></li>
                    <li><a href="#">Grape</a></li>
                    <li><a href="#">Orange</a></li>
                </ul>

            <ul data-inset="true" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Destination" data-inset="true">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Cherry</a></li>
                    <li><a href="#">Cranberry</a></li>
                    <li><a href="#">Grape</a></li>
                    <li><a href="#">Orange</a></li>
                </ul>
        </div>
    </div><!-- /content -->

Any help would be appreciated.

Answer 1

For horizontal list-view, use ui-grid layout offered by jQuery Mobile.

Demo

<div class="ui-grid-a">
 <div class="list ui-block-a">
  <ul data-role="listview">
  </ul>
 </div>
 <div class="list ui-block-a">
  <ul data-role="listview">
  </ul>
 </div>
</div>

CSS - give both ui-block-a and ui-block-b a class in order not to conflict with other ui-grid used.

.list.ui-block-a, .list.ui-block-b { margin-top: 15px !important }