title: flow 3 columns of text automatically with CSS and jQuery
body: <p>I am trying to figure out how to flow text automatically, using CSS and jQuery. </p>
  
  <p>Here is how to make text flow into <strong>two</strong> stacks (which I found on <a href="https://stackoverflow.com/questions/3009670/flow-2-columns-of-text-automatically-with-css">this page</a>): </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      var size = $("#data &gt; p").size();
   $(".Column1 &gt; p").each(function(index){
    if (index &gt;= size/2){
     $(this).appendTo("#Column2");
    }
   });
    });
  &lt;/script&gt;
  
  &lt;div id="data" class="Column1" style="float:left;width:300px;"&gt;
  &lt;!--   data Start --&gt;
  &lt;p&gt;This is paragraph 1. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 2. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 3. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 4. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 5. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 6. Lorem ipsum ... &lt;/p&gt;
  &lt;!--   data Emd--&gt;
  &lt;/div&gt;
  &lt;div id="Column2" style="float:left;width:300px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to convert the JS above so that if flows into three columns instead of just two? </p>
  
  <p>I was thinking maybe</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     $(document).ready(function() {
       var size = $("#data &gt; p").size();
       $(".Column1 &gt; p").each(function(index){
          if (index &gt;= size/3){
             $(this).appendTo("#Column2");
      }
        });
       $(".Column2 &gt; p").each(function(index){
          if (index &gt;= size*2/3){
             $(this).appendTo("#Column3");
          }
        });
      });
  &lt;/script&gt;
  
  &lt;div id="data" class="Column1" style="float:left;width:250px;"&gt;
  &lt;!--   data Start --&gt;
  &lt;p&gt;This is paragraph 1. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 2. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 3. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 4. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 5. Lorem ipsum ... &lt;/p&gt;
  &lt;p&gt;This is paragraph 6. Lorem ipsum ... &lt;/p&gt;
  &lt;!--   data Emd--&gt;
  &lt;/div&gt;
  &lt;div id="Column2" style="float:left;width:250px;"&gt;&lt;/div&gt;
  &lt;div id="Column3" style="float:left;width:250px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But that doesn't work - it still just splits it into two columns. </p>
  
  <p>I'm pretty sure I'm missing something very simple and small, but I'm confounded.</p>
  
  <p>I'd like to make the above work, rather than use the <a href="http://welcome.totheinter.net/columnizer-jquery-plugin/" rel="nofollow noreferrer">Columnizer jQuery Plugin</a>, which is far too much for my meager needs.  </p>
  
  <p>Thank you!
  -Tim</p>