title: iPad Multicolumn Layout Questions
body: <p>I successfully achieved mutli-column text inside a UIWebView of an iPad using the following code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  div.body {
          direction:rtl;
      -webkit-column-count: 3;
      text-align: justify;
      font-size:24px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body &gt;
  &lt;div class="body"&gt;
  &lt;img src="http://d2o0t5hpnwv4c1.cloudfront.net/958_placeholders/placehold.gif"/&gt;
  &lt;p&gt;Long text goes here&lt;/p&gt;
  &lt;img src="http://d2o0t5hpnwv4c1.cloudfront.net/958_placeholders/placehold.gif" align="left"/&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But there were two things I could not do:</p>
  
  <ol>
  <li>How to make the second  be on <strong>top</strong> of the third column of text, not the end. Please bear in mind that the text is variable so I cannot put the  inline.</li>
  <li>How to evolve this to a multicolumn and a multirow layout. For example the long text in the  got too long, I want it to span to a second row with the same 3 columns, instead of having one row with text longer than the height of an iPad in landscape. Rephrase: I want to flow one body of text in a <strong>2x3</strong> grid when needed, instead of 1x3.</li>
  </ol>
  
  <p>I'm open for any kind of restructure needed for this.</p>