I apologize if this has been answered somewhere. I’m having trouble searching the forums. I am fairly new to this and am working my way through HTML, XHTML & CSS for Dummies.
When I use absolute positioning to place an image, how do I get text to appear below it instead of on top or or behind it?
Now to the specifics. The Dummies book was explaining layout, positioning and appearance. The first example involved placing an image with a box of links floating to the left. I did that with my own images and links (I learn best by doing), but I also added text. The text appeared below the image, just like I wanted. The book then discussed absolute positioning and provided an example. I tried the example but again added my own additional text in the same manner as before. This time, the text appeared above and behind the image, but I want it to appear below the image.
What is missing? What do I need to do to fix this? The book doesn’t discuss this issue, and I can’t find an answer on the web. Most sites simply discuss how to position without discussing the impact on text (maybe I’m just using the wrong search terms). In any event, even if I could accomplish the result through means other than absolute positioning, this is a learning experience for me, so I really would like a solution that uses absolute positioning. Thanks!
Code is attached.
I am not a css wiz at all but am wondering here if instead of using AP directly for the image, you place a div with AP and using that as your container to place your image and then text under to suit. Only prob I have with AP is sometimes the cross browser aspect whereby consistency can seem hard to achieve at times.
Float works well of course but may not always get the exact position as you want it.
When I use absolute positioning to place an image, how do I get text to appear below it instead of on top or or behind it?
Hi dtarvin, Welcome to SitePoint
You can’t when using absolute positioning. If you want the text to wrap around the image then you need to float the image.
I just went through this with someone else in this thread.
In post#20 of that thread you will find examples of both Floated and AP’d images.
Here is a very simple example of floating an image.
That would just give you the same problem at the cost of an unnecessary div. AP elements are completely removed from the normal page flow.
A float is the only element that text can wrap around. Text cannot wrap around static or AP blocks.
Float works well of course but may not always get the exact position as you want it.
Margins to the rescue
Thanks for all the responses. So now I have another question. What is the practical use for absolute positioning on a web page? I can’t remember the last time I saw a page that had images but no text. Remember, I’m a beginner. Am I missing something?
Absolute positioning should be used only for small design segments, aka aligning a background image, a corner, or any other aesthetical segment of the page :).
Any structural layout shouild be done via floats, and positioning them into place can be done with margins