title: jQuerymobile - Blocks & Splitscreen for iPad
body: <p>We are working with the framework of <a href="http://jquerymobile.com/demos/1.0b1/" rel="nofollow noreferrer" title="jQuery mobile">jQuery Mobile</a> for the graphical interface of our iPad app, based on HTML5. Because we're creating an app for the iPad, we essentially need the typical split-screen like it is on ipad: A  narrow sidebar on the left side and the main content on the right side: </p>
  
  <p><img src="https://i.stack.imgur.com/dyrik.jpg" alt="enter image description here"></p>
  
  <p>Now my question: I'm searching for the <strong>code to create this splitted screen</strong> and I do not find anything for this in the jquerymobile documentation– Did I miss it or didn't I understand it? If the code for the splitscreen doesn't exist on this website, where can I find something related? </p>
  
  <p>Because I didn't find anything related to what I need, I tried another way to get this splitscreen. So I was working with blocks in the css stylesheets: </p>
  
  <p>for explanation: In jQuerymobile documentation, I found a category with the name <em>"content formatting>layout grid (column)"</em> ( <a href="http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html" rel="nofollow noreferrer">http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html</a>) 
  So I thought about creating two blocks for making the splitted screen. BUT I don't need a splitted screen with 50/50, but much more 20/80 or 30/70. I tried to change it into my stylesheet:</p>
  
  <pre><code>.ui-grid-x { overflow: hidden; }
  .ui-block-x, .ui-block-y { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
  
  /* grid a: 20/80 */
  .ui-grid-x .ui-block-x  { width: 20%; }
  .ui-grid-x .ui-block-y { width: 80%; }
  .ui-grid-x .ui-block-x { clear: left; } 
  </code></pre>
  
  <p>the original was: </p>
  
  <pre><code>.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
  .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
  
  
  .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
  .ui-grid-a .ui-block-a { clear: left; } 
  </code></pre>
  
  <p>Does anybody know what I did wrong? <strong>How to change the size of the blocks?</strong> Is it the right way to do it like this?
  Thanks alot in advance.</p>