How to format divs such that it works similarly as Word's commenting format

Question

I am attempting to use CSS to recreate something similar to formatting of comment boxes in Word, where the comment box will be wherever you insert the anchor for the comment to be, but if there are more comments than room permits, it shuffles the comment boxes accordingly, while keeping it anchored somewhat close to the anchor if possible. The comment box text should also not impact the main document's formatting at any time.

I attempted implementation where I have position: absolute; comment boxes on the side of a large paragraph of text, let's just say, it's a

or anything else, I don't think that really matters... And you basically have something like:

 
  lalalal lalala lal lalalalal 
  just assume that the lines collapse as needed
  but in reality, this will be one big paragraph
  yes, we'll keep going for the sake of this exercise
  yay
  okay, quasi anchor point here **** 
    

      I am the first comment bboooxxxx
      let's get a few lines baby
      I am lovin it!
      Just do it
    
  keep going
  yes we are still going
    
      I am gonna cover you up, first box
    
  okay, let's call it done

Where the simplistic form of css for commentBox will be:

.commentBox {
  position: absolute;
  left: 400 px; /*Whatever more than the width of the settings for the  tag*/
  border: solid lightpink;
}

While this works fine for one comment, multiple comments will inevitably overlap. So, there are a couple ways we can deal with it. First will be table everything right? We can force rows at places where comments get added, and that will just create more row displays for each comment that gets added. But that's a terribly not-elegant solution. It breaks the text, and makes keeping track of everything hard.

I thought about using two columns too, then adding stuff to them separately with position: relative. But I couldn't quite figure out how to make sure that the comments get anchored properly at a certain position within the paragraph of text for that approach. It will just ended up being mashed together - it won't overlap, but that's functionally unacceptable.

So I started looking around SO and not running into much luck. It appears that most approaches involve changing it to position: relative, which I really do not have an issue with but I couldn't quite figure out if I do change it to relative, how I can make sure that the main paragraph's formatting does not get impacted as a result.

Anybody have done something similar before? How did you do it? Or if you haven't, how would you do it?

user_5641669 · Answer

You can use something like this:

.content {
  position: relative;
  width: 75%;
  border-right: 1px solid #ccc;
  padding-right: 10px;
}

.commentbox {
  display: block;
  position: absolute;
  right: -25%;
  width: 23%;
  border: 1px solid #fa0;
  padding: 3px;
}

;


  Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet This is a comment which can even be longer orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
  id, lorem. Maecenas nec odio et ante tincidunt tempus.


Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
  eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

As you can see: widths and position parameter (right) in percentages and a relative/absolute position combination are the main ingedients...

ADDITION AFTER COMMENT:

Here is a second version that uses float: right and clear: right for two comments which would otherwise overlap. In this case using a negative margin-right setting moves the comment box to the right, out of the content area, not occupying any space in there.

.content {
  width: 75%;
  border-right: 1px solid #ccc;
  padding-right: 10px;
}

.commentbox {
  display: block;
  float: right;
  margin-right: -28%;
  width: 23%;
  border: 1px solid #fa0;
  padding: 3px;
  clear: right;
}


  Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet This is a comment which can even be longer orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. This is another comment boxSed consequat, leo eget bibendum sodales, augue velit cursus nunc, Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
  id, lorem. Maecenas nec odio et ante tincidunt tempus.


Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
  eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

How to format divs such that it works similarly as Word's commenting format

1 Answers