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

您必须给playArea一个height值，绝对div不会扩展其父级

Answer 3

The playArea div in this case will not automatically expand in width/height to fit the elements within, and since it has no height defined, it is treated as not taking up any room (which means that the

tag will appear at the same location as the div).

If you don't know the dimensions of the playArea div before hand or they are likely to change, it would be better to layout your elements using float, clear and margin to achieve the same layout you've currently got.

If you haven't already do so, get the Firebug plug in for Firefox - this will make your CSS life infinitely easier, as you can edit CSS and see the changes on the fly. Don't forget to test in other browsers too, though.

Edit: Here's an example done up with floats (did it in a rush so might not be perfect)

<div id="playArea" style="float: left;">
    <div id="widget2" class="widget" style="background-color: green; float: left; margin-left: 63px; margin-top: 35px; width: 80px; height: 42px;">World</div>
    <div id="widget1" class="widget" style="background-color: red; float: left; margin-left: 152px; margin-top: -1px; width: 313px; height: 269px;">Hello</div>
    <div style="background-color: blue; float: left; clear: left; margin-left: 534px; margin-top: 26px; width: 183px; height: 251px;">Bye</div>
</div>
<p style="clear: both; float: left;">Test P Element</p>

Answer 4

Because absolutely positioned elements do not "fill" the box of the playArea div, the height and width you assign each child div do not expand playArea's height and width. I'm not sure what the final problem is that you're trying to solve, but from the names of your ids you're trying to position elements within a "canvas" area. This is good.

The heights and widths of the absolutely positioned divs, again, have no impact on the playArea div's dimensions, but by knowing the heights and widths you are able to tell playArea what its dimensions should be. In this case, giving playArea a width of 580px and height of 785px will position the p element correctly.

Going off of your div ids again, it's a good idea to explicitly define the dimensions of anything like a playArea where the contained elements aren't laid out like normal page elements (absolutely positioned or not). That way, you'll have a more predictable layout.