11

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

superjos
  • 12,189
  • 6
  • 89
  • 134
phpNutt
  • 1,529
  • 7
  • 23
  • 40
  • This question might help: http://stackoverflow.com/questions/1650539/how-to-clear-absolutely-positioned-elements – colllin Nov 16 '12 at 02:58

4 Answers4

6

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.

easeout
  • 8,665
  • 5
  • 43
  • 51
2

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

Steve H
  • 946
  • 9
  • 22
0

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>
Henry C
  • 4,781
  • 4
  • 43
  • 83
  • 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 Dec 23 '09 at 23:19
  • 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 Dec 24 '09 at 00:16
0

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.

Piers Mana
  • 382
  • 4
  • 13