CSS: Alternative method to positon absolute

Question

Hi Guys, I have the following mark up:

<div id="playArea" style="position: relative;">
    <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div 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>

But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.

I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.

Thanks

Answer 1

If I understood correctly, you just have to give the "playArea" div the right height.

Edit: I mean, the combined height of everything inside it.

Answer 2

But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.

As you seem to know all the dimensions and positions already, just add another absolutely positioned div to it and put the relative content in it.

I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.

You need to remove position: absolute to get the floats right. Just width and height are enough.

Answer 3

Float the three inner divs left, put overflow: hidden; on the playArea div and put your <p> under the three inner divs with clear: both;

Answer 4

After reading the comment thread between you and "BalusC", it appears that you have modified your CSS and are now trying to float your items, and use margin-top and margin-left for positioning. You are totally able to do it that way, but you are forgetting that you can also use negative margins to position your elements as well. For example if you use margin-top:-10px; then it will pull the element up (instead of pushing it down, like a normal positive valued margin). The same goes for all of your other margins.

That seems to be the missing ingredient for you now.