How to flow text from DIV to DIV?

Question

I have two DIVs with absolute position on two sides of a HTML page such as (EXAMPLE)

Answer 1

Here is one for fixed-width approach. The gap between two columns will equal to width of main div.

Fiddle

    
The big text here.

    

For variable width you need JS or jQuery.

Update:

I have used jQuery for this purpose as I have found pure JS difficult to find solution of this.

function setGap() {
    var width = $(".main").width();
    $(".sides").css({
        "-moz-column-gap": width + "px",
            "-webkit-column-gap": width + "px",
            "column-gap": width + "px"
    });
}
$(window).resize(setGap);
setGap();

Fiddle

Update 1:

function setGap() {
    var width = document.getElementsByClassName("main")[0].offsetWidth;
    var elem = document.getElementsByClassName("sides")[0];
    var style = elem.getAttribute("style");
    if (typeof style != "null") {
        style =
            "-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
        elem.setAttribute("style", style);
    }
    else {
        style +=
            "-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
        elem.setAttribute("style", style);
    }
}
window.onresize = setGap;
setGap();

Fiddle