View Full Version : Positioning
LearningCoder
07-17-2011, 01:31 PM
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.
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:
http://www.custom-anything.com/sand/somepic.jpg
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.
http://www.custom-anything.com/sand/somepic2.jpg
This is what it's supposed to do, but might not be what you expect.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.