I have a dilemma involving two DIV elements positioned absolutely on the sides of an HTML page, much like this EXAMPLE:
<div class="left">
</div>
<div class="right">
</div>
These are styled using the following 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;
}
My question is, is there a way to insert text into the left DIV and allow any excess text to flow into the right one? I am open to alternative solutions that achieve the same result, regardless of whether they involve these specific DIV elements.
NOTE: While I would prefer a pure CSS solution, it appears unlikely. Therefore, I am seeking a pure JavaScript solution without relying on libraries or frameworks.