Wrap Text Around Images

[bigsilk]

I'm setting up a page where an image lies, and I want text to avoid it, like a newspaper column. Do I need to set up several CSS selectors to so that? Or is there a way to detect images and have the text flow around an image?page: HereAdam

[Ingolme]

You can use CSS float property on the <img> element and the text will flow on the left or right of the image. There's no way to have it flow on both sides of the image at the same time.

[bigsilk]

What about below? I want the text to flow to the left edge of the image, then flow to the left below the image.I've got this:

div.usable_text{position:relative;top: -11em;left:130px;float:left;}div.usable_pix {position:relative;width:100px;top:0px;float:right;text-align:left;padding: 10px;}

Where 'usable_pix' is for the image pushed right and 'usable_text' is for the white area to the left of the pix to be filled with text. Then, below the image, I want to allow the text to go 100% across without causing a visible break.If it's a lot, don't sweat it. But I figured there was a way to wrap text, like one does in MSWord.You've been a lot of help. I appreciate it. Hopefully, after I have picked your brains clean, I'll be able to help others as you have.Adam

[Ingolme]

What about below? I want the text to flow to the left edge of the image, then flow to the left below the image.Adam

It should do that as long as the image is floated. The text should go below automatically, unless you put it into a container with a margin or with a set width.Remove "width: 240px" to get the <div> to expand to the full width of the content area.

[bigsilk]

I have floats in the selector attributes. But when I have both at the same relative position in distance from the top, the text covers the image:Click hereIf you would, please grab the code from the page. I could post it from here, but it's six of one and half a dozen of the other.Adam

[Ingolme]

The relative positioning is going to cause a lot of trouble.I don't recommend using the position attribute at all. Most of the professional uses for it involve Javascript.

[SillyBilly]

I'm setting up a page where an image lies, and I want text to avoid it, like a newspaper column. Do I need to set up several CSS selectors to so that? Or is there a way to detect images and have the text flow around an image?page: HereAdam

For a very interesting way to wrap text around an image that does not have straight line borders, look at this link.Wraping Text

[bigsilk]

Really? This, to me, should be a pretty easy fix. I mean, I'm not trying animations created by complex algorithms, and that's done already!I've been trying to avoid tables, but wouldn't they do this easily?It occurs to me, especially in an environment where CSS can create print-ready documents, that this is a situation that appears commonly.MSWord does it.Please don't get me wrong: It's the system, not you. It just occurs to me that this should be something to be done with an attribute in a selector.Adam

[glopal]

Lets say you want the image on the right, and the text wrapping around it to the left.Put the image in a div, and in the CSS, set that div to float:right;Then for the HTML, you put the image first, then the text. So everything after the image will be put on the left side.That's it. Just make sure NOT to apply a float to the text, that won't work.Then after you get it working you can give the image div a margin if you want a bigger buffer.Hope that helps

[Ingolme]

Lets say you want the image on the right, and the text wrapping around it to the left.Put the image in a div, and in the CSS, set that div to float:right;Then for the HTML, you put the image first, then the text. So everything after the image will be put on the left side.That's it. Just make sure NOT to apply a float to the text, that won't work.Then after you get it working you can give the image div a margin if you want a bigger buffer.Hope that helps

No need to put the image in a <div>. That's just unnecessary mark-up. Assign the float:right straight to the image itself.