Reputation: 15683
I have two DIV
s with absolute position on two sides of a HTML
page such as (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 DIV
and flow excess text to the right one? I am not stuck to this two DIV
, and I'm just looking for a solution to flow excess text to another position.
NOTE: I hope to find a pure CSS
solution, though, it seems to be improbable; then, I am looking for a pure javascript
solution (not using JS libraries).
Upvotes: 7
Views: 3992
Reputation: 49123
CSS Regions (still a 'draft', but) is aiming to fix this problem:
The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.
More info and tutorials at https://www.adobe.com/devnet/archive/html5/articles/css3-regions.html
Upvotes: 5
Reputation: 206699
so far (2012) It's not possible using CSS, CSS3 (with 2 separate elements)
but using JS You can clone the content and use scrollTop
on the right element :
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'm appending also an empty paragraph, to fix the right element need to scrollTop some amount of px
Note: add overflow:hidden;
to your ID elements #left
and #right
Upvotes: 1
Reputation: 10040
Here is one for fixed-width
approach. The gap between two columns will equal to width of main div.
<div class="container">
<div class="sides">The big text here.<div>
<div class="main"></div>
</div>
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();
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();
Upvotes: 1