Positioning

[LearningCoder]

When you have positioned and image 'absolutely' on your page, how can you make the next element on the page display underneath this, without using multiple break tags?

I've been searching google but I cannot find the answer!

Thanks all.

[traq]

You'd need to know how tall the image is. for example,

<style>
#container{ position: relative; }
#over{ position: absolute; top: 0; right: 0; }
#under{ position: absolute; top: 100px; right: 0; }
</style>
<div id="container">
   <image id="over" src="somepic.jpg" alt="some pic" height="100" width="300">
   <p id="under">Some paragraph</p>
</div>

results in something like:


keep in mind, however, that absolute positioning changes how the elements are laid out on the page.
Subsequent paragraphs, images, etc., for example, will not automatically "float" around them; you might end up with over/underlapping content instead.



This is what it's supposed to do, but might not be what you expect.