Linking multiple elements together so they are sharing the same content

Question

Is it posible to have two elements sharing the same content:

----------
| Line 1 |
| Line 2 |
| Line 3 |
----------
    [SOME OTHETR STUFF HERE]
----------
| Line 4 |
| Line 5 |
| Line 6 |
----------

Or a more complex example, using css3 columns

------------------- --------- --------------------------------
| Line 1 | Line 4 |   OTHER   |    Line 7    |    Line 10    |
| Line 2 | Line 5 |   STUFF   |    Line 8    |    Line 11    |
| Line 3 | Line 6 |   HERE    |    Line 9    |    Line 12    |
------------------- --------- --------------------------------

Hope this makes sense?

Also the difference divs can be set up with difference width, height, columns & style.

Thanks for your feedback.

---

Trying to elaborate:

If any of you know to programs like inDesign where you can create two text fields and link then together so that the text continues from the first text field to the next. And again you can link another to the collection and if the text is long enough it will start at textfield one go to the second and at end at the last:

These boxes can be placed all around the screen and the only thing they have together is that they share the same content.

Box 1
------------------------------
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Proin rutrum ligula nec quam 
molestie sed rutrum justo 
------------------------------

Box 2 
------------------------------ 
auctor. Quisque pulvinar diam 
nisl. Curabitur porttitor 
vehicula dui. Sed tempus 
venenatis est, non egestas 
------------------------------

Box 3
------------------------------ 
urna consequat a. Morbi diam 
mi, fermentum non lobortis 
eget, rhoncus id arcu. 

------------------------------ 

Answer 1

Here's a solution that handles both the height not being a multiple of the line height, and the widths being different, based on your original.

jQuery(function($) {
  var content = $(".c1").html(),
      $elems = $("div").empty(),
      lineHeight = 20,
      offset = 0,
      wholeThing = $("<div />"),
      maxWidth = 0;
  $elems.each(function() { maxWidth = Math.max(maxWidth, $(this).width()); });

  $elems.each(function() { 
    var thisWidth = $(this).width(),
        thisHeight = $(this).height(),
        floatHeight = (thisHeight / lineHeight | 0) * lineHeight;

    wholeThing.append($("<div />").css({
      width: maxWidth - thisWidth,
      height: floatHeight,
      clear: "right",
      float: "right"}));
    if (thisHeight % lineHeight) {
        wholeThing.append($("<div />").css({
          width: maxWidth,
          height: thisHeight - floatHeight,
          clear: "right",
          float: "right"}));
      });
    }

  wholeThing.css("width", maxWidth).append(content);

  $elems.each(function() {

    var $content = wholeThing.clone().appendTo(this);

    $content.css({
      position: "absolute",
      left: 0,
      top: -offset
    });

    offset += $(this).height();
  });
});

It's the same approach you took, but takes it one step further. You created divs with the full text, positioning them inside the target divs, shifted upwards by the combined heights of all the previous containers in the "chain".

What I added was this:

• The content div (called wholeThing, the one that's eventually multiplied and added to each container) has its width set to the highest width of all containers.

• Along the right side of wholeThing, we put floated divs that make sure that the text is wrapped according to the applicable width. In the example, the first container has a width of 200 pixels, and the highest width (and thus the width of wholeThing) is 300px. Thus we place a floated div of 100 pixels width and with the same height as the first container (rounded down to full multiples of the line height) on the right edge. This solves the "different widths" problem.

• After that, assuming the div's height is not a multiple of the line height, we add an extra full-width float to make sure we don't have a half line at the bottom, solving the line height problem.

The "rounding down to multiples of the line height" thing is only for some webkit browsers, because of this bug. This seems to have been fixed in Chrome, but I still see it in other browsers (notably, Safari 5 and the Android browser).

If this issue didn't exist, you could instead make the width-constraining div have the full height of the container (and not round down), and make the full-width div always have height 1 (and account for that extra pixel when incrementing offset). This would have the awesome advantage that you're not required to have a fixed line height. Here's an example – it works in Chrome, Firefox, Opera, and IE9+, but not in the above-mentioned webkit browsers. It also seems to work in IE8, though I haven't quite figured out why, since my first version (the one that works in Safari) breaks in IE8. To be honest, I didn't spend too much time on IE8 here.

So the top version should work in IE9+ and, well, all other browers, more or less.

As far as columns go, I don't see that happening (other than by essentially rebuilding the columns with divs).

Answer 2

Guy, I guess you are talking about CSS Regions. This is a really cool feature but browser support is not perfect yet: