Linking multiple elements together so they are sharing the same content

css, html, javascript, jquery

Solution

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 `div`s 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 `float`ed `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 `float`ed `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).

Problem

Original source