I was wondering how to do this, my current mark up is as follows:
-
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)
Bye
Test P Element