7

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?

John
  • 15,990
  • 10
  • 70
  • 110
hal
  • 4,845
  • 7
  • 34
  • 57
  • 1
    Are you wanting the `.child` elements to appear *outside of* the `.parent` containers? – Jacob Apr 09 '13 at 17:58
  • yes, they will need to expand the width of the grandparent and be transparent so the parents are visible underneath them. – hal Apr 09 '13 at 18:01

1 Answers1

7

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.

Mike H.
  • 1,731
  • 9
  • 31
  • I had considered this but my parent elements were already set to relative. But now that I look over the code again I realize that they no longer need to be relative now that I have changed them to inline-blocks. Thanks – hal Apr 09 '13 at 18:10