CSS: have a div after an absolute positioned div

Question

I was wondering how to do this, my current mark up is as follows:

<div id="playArea" style="position: relative;">
    <div id="widget1" class="widget" style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div id="widget2" class="widget" style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
    <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>

Now, if I create a paragraph tag after the last </div>, the content of the p tag is not appearing under all of these div's in the browser. Any ideas how i can do this?

Thanks guys

Answer 1

If you're using absolute positioning but you don't know the height of what you're positioning, that is a problem that HTML isn't very good at solving. I have seen (and probably written) hacks where JavaScript is used to position an element based on the offsetHeight of another.

But you might be better off using the CSS float property instead of absolute positioning. float and clear are pretty good for positioning things like you want, without sacrificing automatic page flow.

Answer 2

You'll have to give the playArea a height value, absolute divs will not expand their parent