How to transfer text from DIV to DIV?

Question

I have two DIV with an absolute position on two sides of an HTML page, for example ( EXAMPLE )

 <div class="left"> </div> <div class="right"> </div> 

with CSS

 .left{ position:absolute; left:10px; top:10px; width:100px; height:100px; background:red; } .right{ position:absolute; right:10px; top:10px; width:100px; height:100px; background:blue; } 

Is there a way to add text to the left of the DIV and move the excess text to the right? I do not adhere to these two DIV , and I'm just looking for a solution to move the excess text to another position.

NOTE: I hope to find a clean CSS solution, although this seems unlikely; then I'm looking for a pure javascript solution (not using JS libraries).

Answer 1

The areas of CSS (still a "project", but) aims to fix this problem:

The CSS area module allows content to go through several areas called regions. Regions are not necessarily adjacent to the order of the document. The CSS area module provides an advanced content flow engine that can be combined with positioning schemes as defined by other CSS modules, such as a multi-column module [CSS3COL] or grid layout module [CSS3-GRID-LAYOUT], to locate the regions where the content stream occurs.

Additional information and guides at http://html.adobe.com/webplatform/layout/regions/

Answer 2

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

Fiddle

 <div class="container"> <div class="sides">The big text here.<div> <div class="main"></div> </div> 

For variable widths, you need JS or jQuery.

Update:

I used jQuery for this purpose, since I found that pure JS is hard to find a solution to 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

Answer 3

still ( 2012 ) Unable to use CSS, CSS3 (with two separate elements)

but using js . You can clone the contents and use scrollTop in the right element:

Live demo

 var d = document, $left = d.getElementById('left'), $right = d.getElementById('right'), leftH = $left.offsetHeight; $right.innerHTML = $left.innerHTML +'<p style="height:'+ leftH +'px;" />'; $right.scrollTop = leftH; 

As you can see, I am also adding an empty paragraph, in order to fix the desired item you need to scrollTop a certain amount of px

_{Note. add overflow:hidden; to your #left and #right identity elements}