title: JQM : Div with data-role page will sit on top of other element
body: <p>I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.</p>
  
  <p>So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt; 
      &lt;html&gt; 
          &lt;head&gt; 
          &lt;title&gt;Page Title&lt;/title&gt; 
  
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt; 
      &lt;body&gt; 
      &lt;table id="headergroup"&gt;
      &lt;tr&gt;&lt;td&gt;
         &lt;input&gt;.........
         &lt;img&gt;.......
      &lt;/table&gt;
  &lt;wrapper&gt;
      &lt;div data-role="page" id="tab1"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Page Title&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;   
              &lt;p&gt;Page1 content goes here.&lt;/p&gt;     
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;
              &lt;h4&gt;Page Footer&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      .........other div......
      &lt;div data-role="page" id="tabN"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Page Title&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;   
              &lt;p&gt;PageN content goes here.&lt;/p&gt;     
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;
              &lt;h4&gt;Page Footer&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/wrapper&gt;
      &lt;div id="footer&gt;
       &lt;img .......&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).</p>
  
  <p>Is my implementation correct? How do I overcome this problem? Thanks.</p>