title: Split div's content in two columns with Javascript
body: <p>I'm trying to find a way to split the content of one div and split it into two columns by following a logic process. </p>
  
  <p>With a logic process, I mean that I'd like to split the content more or less in a half but without breaking the last sentence of the first column for example. </p>
  
  <p>So I'd like to let finish the last sentence of the first column and than split the other part and print it in the other column, this is why it is almost never "cut in half".</p>
  
  <p>So I'd like to keep my first column in this way: </p>
  
  <p>Lorem ipsum dolor sit 
  amet, consectetur 
  adipiscing elit. 
  Curabitur luctus orci 
  in metus venenatis 
  luctus orci in metus 
  venenatis mattis</p>
  
  <p>instead of something similar that might happens by cutting it in a half:</p>
  
  <p>First column:
  Lorem ipsum dolor sit 
  amet, consectetur 
  adipiscing elit. 
  Curabitur luctus orci 
  in metus venenatis 
  luctus orci in metus 
  venenatis </p>
  
  <p>Second column:
  mattis ... etc (rest second col)</p>
  
  <p>It is really difficult to find documentation regarding this, I've been searching for a while. </p>
  
  <p>I was try to follow this:</p>
  
  <p><a href="https://stackoverflow.com/questions/1238155/splitting-html-into-multiple-columns-with-javascript-jquery">Splitting HTML into multiple columns with Javascript/jQuery</a></p>
  
  <p>But it doesn't seem to split anything at the moment:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="split"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie felis eu nisl gravida, sed molestie tortor egestas. Integer a velit quis mauris vehicula sagittis nec in dui. Suspendisse potenti. In hac habitasse platea dictumst. Donec convallis pharetra diam, id rutrum purus porta eu. Morbi feugiat mauris sed viverra volutpat. Pellentesque aliquam, nibh ac accumsan vehicula, ex justo blandit quam, at rhoncus turpis neque id est.
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function textSplitter(){
  }
  
  textSplitter.prototype.LENGTH_TO_SPLIT=5000 //max chars in single line
  
  textSplitter.prototype.split=function(){
      var contentDiv=document.getElementById("split"); // get an element
      var text=contentDiv.innerHTML; 
      var length= text.length; 
      if(length){
          var div1sbstr=text.substring(0,this.LENGTH_TO_SPLIT); //take a substring
          var div1=document.createElement("div");
          contentDiv.appendChild(div1); // append it
      }
      if(length&gt;this.LENGTH_TO_SPLIT){
          var div2sbstr=text.substring(this.LENGTH_TO_SPLIT,this.LENGTH_TO_SPLIT*2);
          var div2=document.createElement("div");
          contentDiv.appendChild(div2);
      }
      if(length&gt;this.LENGTH_TO_SPLIT*2){
          var div3sbstr=text.substring(this.LENGTH_TO_SPLIT*2,this.LENGTH_TO_SPLIT*3);
          var div3=document.createElement("div");
          contentDiv.appendChild(div3);
      }
  }
  </code></pre>
  
  <p>Any precious idea? </p>