Position div relative to prev() div

Question

Say I have divs like this:

<div></div> // position: relative, right: 20px

<div></div> // position: relative, right: prev() div + 20px

Is this achievable using only HTML/CSS (no js)?

No these divs are on top of each other. I want it to be like threaded comments where a div below is slightly to the right. — Zorgan, Feb 21 '17 at 03:04
Possible duplicate of [CSS - Use calc() to keep widths of elements the same](http://stackoverflow.com/questions/23076550/css-use-calc-to-keep-widths-of-elements-the-same) — Zeth, Feb 21 '17 at 03:09
I don't really have an example. But i'm just asking if it's possible to detect a css attribute from the previous `div` (`margin-left` or `right`), and then use that info to make the css attribute for the current `div`. — Zorgan, Feb 21 '17 at 03:10
Nope. As far as my knowledge goes, what you're trying to achieve is currently not possible purely by CSS. The closest to what you are looking for is CSS3 [calc()](https://developer.mozilla.org/en/docs/Web/CSS/calc) function & even that doesn't do what you want unfortunately. — Nikhil Nanjappa, Feb 21 '17 at 03:12
javascript is your friend, but what you are wanting is achievable if you nest the divs inside eachother - so each nested element would then be able to be offset raltive to its parent. - like a nested ul li scenario — gavgrif, Feb 21 '17 at 03:29

Timothy Quang Phuc Nguyen · Accepted Answer · 2017-02-21T05:22:32.750

I am not sure with pure HTML + CSS it could be done with your structure, if not using Javascript. I am thinking of making a change in HTML structure and putting them in a parent-child divs.

Check this out:

HTML Code

<div>
  <div>
  AAA
  </div>
  <div class="sub-level">
    <div>
    BBB
    </div>
    <div>
      <div class="sub-level">
      CCC
      </div>
    </div>
  </div>
</div>

CSS Code:

.sub-level {
  margin-left: 20px;
}

https://jsfiddle.net/3hwhq31t/2/

Hope it helps.

Position div relative to prev() div

1 Answers1