Positioning absolute and stay documentflow

Question

Is there any way in css to position an Element something like absolute (in relation to the parent element), e. g. at the bottom of its parent element, but have it still staying in the documentflow?

E. g. that an element, positioned relative above the element, by getting more height, pushing the "absolute" element downwards while the container-element's height is also increaseing at the time the relative element would "touch" the absolute one but on the otherhand the "absolute"-elements position and the container-elements' height won't change if there's no "touch"?

Or is this just an impossible task and can only be done with javascript?

Answer 1

You can position an absolute div relative to parent if you force

position: relative;

on the parent div. Otherwise absolute will position relative to the document.

<div style="position:relative;">
    <div style="position:absolute; top:10px; right:10px;">
         ................
    </div>
</div>

This won't have the stretch effect you want, but if you want the sort of block behaviour you are describing, what's wrong with floating and applying margins?

<div style="position:relative;">
    <div style="float: right; margin-top:10px; margin-right:10px;">
         ................
    </div>
    <div>text</div>
</div>

As long as you clear the parent div correctly, then either the floated content or the normal content of the above div can determine the height of the parent element.

If you also need alignment to the bottom then you can look into display: table-cell as an option (doesn't work on IE7)