Is there a way to wrap text around an absolutely positioned image?

Like the title says…

I’ve noticed that when I float an image the text automatically wraps around it. When I absolutely position an image however it just sits across the top of the text.

Is it even possible to wrap text around an absolutely positioned image, or do we have to use JavaScript or something like that?

Looking forward to learning more about this…

All the best,

Tim.

Off the top of my head, no testing, I would think that you could create a span (or div) wrapper to contain the image and text. Then absolutely position the span (or div) wrapper. The text should then be able to wrap around the image within the wrapper.

So, you’d give the wrapper the height x width of the image? + any padding you may be chucking in it (not the you would)?

Or am I way off the mark?

Attached is a zip file containing a test.php file and image. You can see how I created the css for the absolute float to include and image and text that wraps the image. Very simple. You can use javascript to change the left and right properties to move it around.

Hope this gets you started!

I just set the width of the container. THen for the image I added a right margin to keep the text from bumping up next to it. Lastly, not, I didn’t set the height of the container, thus, if more text is added the vertical size of the container will grow.

Hi Holmescreek.

I tried your example and for what you were doing it worked well. The problem I have though is that the text then flowed under that div. Which kind of defeats the purpose of the effect that I’m after.

You can find the thing I’m talking about here http://www.users.on.net/~timbothecat/testing/mti/index.html .

I simply want the text to flow around the image at the bottom the way it does around the one at the top.

Any advice would be great because the only other suggestions I have received so far have been to use tables to lay it out (something I’m trying to go to massive lengths to avoid). Surely there is a way to do this!

All the best,

Tim.

I looked at your example page, yes, the photo on the bottom. Why not just do a float right on the image with some left, top and bottom padding?

Here are some other ideas, note Tab #7, is that what your looking for?

http://www.barelyfitz.com/screencast/html-training/css/positioning/

I typed this out really quick, so you would need to tweak and test for yourself adding appropriate margins for the default left floated image and the .right floated image so that the text doesn’t bump up next to the images…

<style>
#mycontainer img { float:left; margin:4px 4px 4px -px; }
#mycontainer img .floatright {float:right; margin:4px 0px 4px 4px; };
<style>

<div id=“mycontainer”>

<p><img src=“firstimage” />My text paragraph goes here and so on and so forth.</p>
<p> </p>
<p><img class=“floatright” src=“secondimage”>This is the second paragraph with the image floating to the right of me.</p>

</div>

Correct me if I’m wrong (which I probably am)… but wouldn’t that just meant that nothing will be able to sit above the image? I can give that a shot to find out I suppose.

Thanks Holmescreek. :beer:

Hey Holmescreek.

I tried what you were talking about with the margin but, as I suspected, it left a huge gap above the picture that text couldn’t fill.

Tab #7 is what I’ve already done on the left hand side of the page.

I got around it with a compromise… if you take a look at the page now you’ll see that the text wraps around the bottom of the bottom image. This was achieved by adding another div tag and floating the image right and then giving it a negative margin so that it has the appearance of text wrapping around the image.

I originally wanted the text to wrap from the top but I wasn’t able to achieve this and so settled for what I’ve actually come up with.

Just wanted to say thanks for all your help mate. Even though I didn’t end up using your suggestions they forced me to think outside the box (no pun intended) :smiley: and stretch myself as far as my learning curve goes.

So, :nanaman: :weee: . Thanks again.

Tim.

Any advice would be great because the only other suggestions I have received so far have been to use tables to lay it out

You can’t do it with tables either so the suggestion was nonsense :slight_smile:

If I understand you correctly you wanted an image right at the bottom of the page and for the text to wrap around it but not under it. This can’t be done automatically and can only be done very roughly at all.

You just have to put the image at an appropriate point in the html and float it from there. In a fluid layout this will never be exact.

It is just physically impossible to do by any means other than scripting (tables will be no help here either.)

In your first question you used absolute positioning but absolute elements are removed from the flow and even if you used a floated elements to take up the space of the absolute element then you are basically doing the same as floating anyway so the procedure is going nowhere.:slight_smile:

You have got it about as best as you can do it.

Sorry, my mistake those two lines should have been :

#mycontainer img { float:left; margin:4px 4px 4px 0px; }
#mycontainer .floatright {float:right; margin:4px 0px 4px 4px; };

Attached is a html page with your images that does exactly what you are wanting without using negative margins. It is a lot less markup in your content than the method you mentioned above.

cheers!

hc

I’m a little confused here as to what the question is or was :slight_smile:

The code provided above is simply floating an image to the right. There is nothing special or difficult about that. You can simply make space around the floated element by using margins.

I got around it with a compromise… if you take a look at the page now you’ll see that the text wraps around the bottom of the bottom image. This was achieved by adding another div tag and floating the image right and then giving it a negative margin so that it has the appearance of text wrapping around the image.

What has that got to do with anything? :wink:

The text would have wrapped around the bottom of the image automatically anyway if it was floated. The negative top margin is just pulling into the gap above. There was no need for the #contentbottomtext wrapper at all as you could drag the image into the gap if that’s what you wanted.

BTW don’t use empty elements just to make space as that is very bad practice - use margins on existing elements instead:)


 <p>&nbsp;</p>

I thought you were trying to align the image at the bottom of the page exactly in line with the bottom of the text which as I said in my post above is not possible at all for a fluid layout.

So there’s really no confusion at all then. :lol: What I wanted to do -as you rightly pointed out can’t be done- is put an image in the bottom right hand corner of the page. What I have done instead is place an image in a new div and float it right. You are correct that there’s nothing special about that, other than the fact I was able to come up with it -hence, it was special to me as a newbie- allowing me to get a look similar to what I was after. The text isn’t going to flow around the image in the truest sense of the word as it’s in 2 separate divs but that is the compromise I’ve had to make to achieve the layout -or close to it.

The original question was how to put an image at the bottom right of the page and still have text float around it rather than under it (which is what happens with an absolutely positioned image). By under it I don’t mean to the bottom of the image, I mean actually disappearing beneath the image itself. Sorry if I created any ambiguity here. I was basically trying to preempt what the person I’m designing the page for was going to ask (which they since have :slight_smile: ) which is “can we have more pictures on the page”. I obviously wanted some balance, and not to simply have all the images up the top of the page.

BTW don’t use empty elements just to make space as that is very bad practice - use margins on existing elements instead:)


 <p>&nbsp;</p>

I thought you were trying to align the image at the bottom of the page exactly in line with the bottom of the text which as I said in my post above is not possible at all for a fluid layout.

I’m always very keen to hear and learn from those more experienced than myself Paul. As someone who is just starting out I want to learn the right way from the beginning so advice like that above will always be taken and considered. In my defense on this occasion (and I’m assuming you’re referring to the:

<div id="clearone>&nbsp;</div>

element in my markup) I can only refer you to Sitepoint’s, "HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer, p 247. Here they use a clear element to stop floated divs sticking down under the containing tag. As I had originally tried this with 2 divs inline I needed to put the clear space in to stop the text div hanging down and covering the footer etc. Now that I’ve done it using only the one div I should be able to get rid of that particular element.

Thanks once again for your responses guys, I am most grateful that you’ve taken the time to reply (even though my descriptions created confusion on occasion) as it’s helping me to learn about this stuff in a way that books just can’t teach.

You guys rock!

Tim.

He(Timbothecat) was just confused. I was assuming from his first post he wanted to put an image at the bottom right of a div using absolute positioning, but, having the text within the div wrap around it. Which, of course won’t work. Whenever someone is trying to learn, exact terminology is something that you shouldn’t expect from a those trying to learn for the first time.

Second, you will rarely have to use a “clearyone” or in most cases a “clearfix” (used in most CSS books) – but sometimes, they are necessary depending on your project.

Finally, don’t ever be intimidated by asking a question. A couple years back I spent most of my time in the php forum where everyone was nice and friendly, then got into the CSS forum, where everyone acted like “know it alls” and responded with an answer typically beginning with “duh”.

I’m glad to see that members posting answers to questions in the CSS forum (and other forums) have been compassionate about helping others, such as yourself.

So, post a question any time…SPF members are always here to help!

I actually took the <div id=“clearone”> </div> out and it messed up the layout when I put more text into the div.

After reading your last post though (especially the bit about rarely needing divs like the one above) I went back and had a look at my code. The reason you would use one is if you have a multi column layout and the longer columns keep protruding past the end of the div.

Like I said, when I looked at my markup, I still had “float: left;” in the div element. As soon as I took that out I no longer needed the “Clear” div.

Having said all that… I think Paul may have been referring the the code you had posted in an earlier reply. I had a look through my code for <p> </p> and there wasn’t any in there, but in one of your earlier replies you put some in there. I’m asking this again as a newbie… why is that a problem? Does it freak screen readers out like nested tables does?

I’m trying to learn the right way to doing this after coming from a “table layout” background. I’m very keen to do my sites correctly so thanks once more for all your help. (And for being so patient. :slight_smile: )

The <p> </p> is just extra markup that makes the size of the .html/php file larger and reduces page load time. The more compact the size, the better, well, at least in the world of programming. :wink:

As Paul said, and I agree, use margin settings vs <p> </p> when creating pages.

Hi,

I think you’ve both covered the ground OK already :slight_smile:

With empty elements yes I was talking about the empty p elements and its best to use margins on adjacent elements instead. It’s the same as using breaks just to make space which is also frowned upon unless the context is correct.

However there are times when you have to use an empty element such as when you need a hook to hang an image on or when you are using one of the old clearing techniques (although there are better unobtrusive methods available now). :slight_smile: