How to position element below relative positioned element without overlapping?

Question

If I put anything after element with relative+absolute positioned elements, it overlaps. It does not do this if I specify height, but I do not want to do this as content of relatively positioned element is dynamic. How to get rid of overlapping without specifying height?

Simple example:

<div style="position:relative">
    <div style="position:absolute;">
        blabla
    </div>
</div>
I WANT THIS BELOW

Answer 1

absolute positioning takes the element out of the flow of the structure. It's presence is ignored for this reason, it's what it's purpose is. If you need an element positioned left or right then use float

When floating elements ensure you clear the bottom of the div so then the layout is preserved

<div style="clear:both;"></div>

DEMO http://jsfiddle.net/kevinPHPkevin/uHuSF/

Otherwise a different approach is required to accomplish your goal.

Answer 2

Since you've applied position:relative to your very first element either you've to specify the height or provide padding-bottom to it.

For instance, in your provided code I've applied height of 20px to it.

Note: Using height is better than using padding-bottom for this kind of scenario

<div style="position: relative; height: 20px;">
    <div style="position:absolute;">blabla</div>
</div>
<div>I WANT THIS BELOW</div>