Is there a way to align an element to its 'grandparent' without jQuery/javascript?

Question

I need to align an element to the edge of its 'grandparent'.

Here's an example of the code:

<div id='grandparent'>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
</div>

So the .parent elements are going to be positioned inline which will depend on the width of the #grandparent element. I need each .child element to be positioned to the left edge of #grandparent.

Any chance this is possible without javascript?

Answer 1

Assign a relative position to the grandparent and an absolute position to the child elements. Then use the top, left, bottom, right properties of the children elements (which is with respect to the grandparents bounds) to get your desired effect.