views:

398

answers:

3

Hey, 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 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

+1  A: 

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

Steve H
+4  A: 

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.

Kevin Conner
A: 
Blakomen
hey, thanks for your answer. But this code you suggested, doesnt solve my problem as now the second widget (widget1), starts after the 1st widget. So basically margin: 0; on the second widget would position the div straight under the first div. I want it so that the div's can appear anywhere, so the second div could be displayed above the first one if possible. I have tried various changes using firebug but havent yet found a solution. Thanks
phpNutt
ideally i want each div to start at the position of x = 0 y = 0 and the only way i have found this so far is by using absolute positioning. But with using clear: left; the y is equal to the total height of the current div
phpNutt