Continuing overflowed text in a different div?

Question

What I am trying to do is create a site that displays my rants in faux letter form.

I want the "paper size" (div size) to be fixed, and the text to continue on the second piece of paper (a second div) displayed just below the first paper like this..

I apologize, being a new user, I am not allowed to post the screenshots I have created to help explain my situation, so am forced to link until I have enough reputation points:

http://img16.imageshack.us/img16/5538/pagesuc.jpg

ONLY FOR THE SAKE OF SIMPLICITY: I've created a simple html/css page to demonstrate in the simplest form what I am trying to accomplish with the code:

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.container {
    background: #FFFFFF;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
#lbox {
    background: #F00;
    width: 300px;
    height: 400px;
    float: left;
}
#rbox {
    background: #00F;
    width: 300px;
    height: 400px;
    float: right;
}
.flowcontent {
    padding: 10px 50px;
}
</style>

<div class="container">
  <div id="lbox">
    <div class="flowcontent">
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div id="rbox">
    <div class="flowcontent"> </div>
  </div>
</div>

Screenshot:

I apologize, being a new user, I am not allowed to post the screenshots I have created to help explain my situation, so am forced to link until I have enough reputation points:

http://img689.imageshack.us/img689/7853/overflowc.jpg

In this case I would like the overflow from the red div to continue in the blue div on the right.

I realise this may not be possible with HTML/CSS alone, but was hoping maybe CSS3 might have some new tricks for this, as it has more advanced column handling.. If that's a no go, does anyone have a suggestion for a logical way to go about breaking this up using PHP or even JavaScript or JQuery?

I know PHP, but am still a JS/JQ newb so I have provided some (hopefully) very simple example code for anyone to plug in their own JS/PHP examples.

Anyway, thanks for your time.

Answer 1

I came up with a small JS Script that might help you out. It's far from perfect, but might give you a decent starting point. Essentially, it loops through your large text and looks for a scrollbar to appear. You may need to alter the calculations just a bit.

JSFiddle http://jsfiddle.net/Tt9sw/2/

JS

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');

$.fn.hasOverflow = function() {
   var div= document.getElementById($(this).attr('id')); 
   return div.scrollHeight>div.clientHeight;
};

for(var x=0; x<wordArray.length; x++){
    var word= wordArray[x];
    currentCol.append(word+' ');
    if (currentCol.hasOverflow()){
        currentCol = currentCol.next('.col');
    }
}

HTML

<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>

CSS

.col{
   width:200px;
   float:left;
   height:200px;
   border:1px solid #999;
   overflow:auto;
   font-family:tahoma;
   font-size:9pt;
}

UPDATE

For this example, you must include the jQuery Libray in your scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"  type="text/javascript"></script>

PS - if you get to know jQuery, you will start to use it for everything. It greatly increases cross-browser compatibility and simplifies many common tasks.

Answer 2

What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you're really interested. But as others have said, right now you're SOL and will need to find another solution.

• http://www.adobe.com/devnet/html5/articles/css3-regions.html
• http://labs.adobe.com/technologies/cssregions/
• http://dev.w3.org/csswg/css3-regions/