Jump to content

Wrap Text Around Images


bigsilk
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Edited by bigsilk
Link to comment
Share on other sites

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. Edited by Ingolme
Link to comment
Share on other sites

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

Edited by bigsilk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...