title: Transfer overflow from one div to another
body: <p>Situation: I have two fixed-height divs, overflow set to hidden on both, and dynamic text content within the first div. Should that content exceed the overflow boundaries of the first div, I would like for it to automatically spill into the second div.</p>
  
  <p>My questions is simply how to do this? I've researched, and the closest thing I found was a JQuery plugin that automatically creates columns for a newspaper-like layout. While this is not exactly what I need, it does give me hope that this is achievable on a simpler level.</p>
  
  <p>Visual Example:</p>
  
  <pre><code>  &lt;html&gt;
       &lt;head&gt;
         &lt;style type="text/css"&gt;
            div{height:1in;width:4in;overflow:hidden}
          &lt;/style&gt;
       &lt;/head&gt;
      &lt;body&gt;
       &lt;div id="d1"&gt;...(enough text to cause overflow exceeding 1in height)...&lt;/div&gt;
       &lt;div id="d2"&gt;...(the rest of the text that got cut off from the first div)...&lt;/div&gt;
      &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>Thanks everyone! Based on all the input, I put this together. NOTE: this may not suit everyone's purpose:</p>
  
  <ol>
  <li>I did it in JQuery</li>
  <li>This is very conceptual</li>
  <li>Each additional item it its own element, and not just open text</li>
  <li>I already know for my needs that a single div will not break the overflow limits</li>
  </ol>
  
  <p>That being said:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      #base{border:1px black solid;height:2in;width:3in;overflow:hidden;}
      #overflow{border:1px black solid;width:3in;}
      .content{width:2in}
  &lt;/style&gt;
  &lt;script type="text/javascript" src="ref/js/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="work.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="base"&gt;
      &lt;div id="sub"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div id="overflow"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>JQ</p>
  
  <pre><code>$(document).ready(function(){
  
  //  An array of content, loaded however you wish
  var items=new Array();
  items[0]='&lt;div class="content" id="C0" style="border:1px blue solid;height:.75in"&gt;content 1&lt;/div&gt;';
  items[1]='&lt;div class="content" id="C1" style="border:1px green solid;height:.75in"&gt;content 2&lt;/div&gt;';
  items[2]='&lt;div class="content" id="C2" style="border:1px red solid;height:.75in"&gt;content 3&lt;/div&gt;';
  items[3]='&lt;div class="content" id="C3" style="border:1px yellow solid;height:.75in"&gt;content 4&lt;/div&gt;';
  items[4]='&lt;div class="content" id="C4" style="border:1px orange solid;height:.75in"&gt;content 5&lt;/div&gt;';
  
  //  Variable for the height of the parent div with the fixed width
  var baseheight=$("#base").css('height').substring(0,$("#base").css('height').length-2);
  
  //  Function to dynamically get the height of the child div within the fixed width div
  function subheight(){return $("#sub").css('height').substring(0,$("#sub").css('height').length-2);}
  
  // For each individual piece of content...
  for(i=0;i&lt;items.length;i++)
      {
      //  Add it to the child div
      $("#sub").append(items[i]);
  
      // Variable for the difference in height between the parent and child divs
      var diff=subheight()-baseheight;
  
      //  If this piece of content causes overflow...
      if(diff&gt;0)
          {
  
          // Remove it...
          var tooMuch="#C"+i;$(tooMuch).remove();
  
          // And put it in the overflow div instead
          $("#overflow").append(items[i]);
          }
      }
  
  });
  </code></pre>