Javascript/Jquery flow text into divs

Question

How do I flow a text stream from one div to the next? Each div has a fixed height and width and I need the data to be passed to the first, then if that is filled overflow to another etc. (The second etc. divs need to be dynamically created). Eventually the divs will be contenteditable, this is the page technique for a simple WYSIWYG style editor.

Please help...

JS Fiddle (note zoom in use on body)(I need to reflow on keyup/down, make pages and remove as necessary and be able to add in the middle)

function loadgo(){
    run();
    var h = document.getElementById('page'+(document.getElementById("pagecount").value-1)).offsetHeight;
    document.getElementById("loadgo").value = h+1;
    if (h > 1135){
        var pagecount = document.getElementById("pagecount").value;
        //$('body').append("<div class=page style='color:#F00' id='page"+pagecount+"' contenteditable>"+this.id+"</div>");
            var objTo = document.body;
            var divtest = document.createElement("div");
            divtest.style.color = '#F00';
            divtest.id = "page"+pagecount;
            divtest.className = 'page';
            divtest.contentEditable = "true";
            divtest.innerHTML = "new div";
            objTo.appendChild(divtest);
        document.getElementById("page"+pagecount).focus();
        document.getElementById("pagecount").value++;
        zoomin();zoomout();
        run();
    }
}
function run(){
    setTimeout(function() {
        loadgo();
    }, 500);
}
loadgo();

Answer 1

What you're looking for is called CSS Regions. This allows your text to flow through various containers placed on your site.

You can read about it on Adobe's site, and Apple has a nice WWDC video explaining how to implement it (starts at 8:40). Also check out the Editor's Draft.