View Full Version : Image Text Wrapping

02-11-2010, 06:06 PM
Ok, I've searched around and I don't think this is possible but...

Every example of image text wrapping I can find requires that you put the <img> into your html before or after a paragraph. I'd like have it so that I can move my image anywhere on the left side of my div box and the text will flow around it. My concern is that I want my image placed on the left side but in the middle of a paragraph so that text from the paragraph wraps all around it on the top, right, and bottom.

I realize that you can insert an <img> in the middle of the words to the paragraph and float left in css but my problem with that is it seems if the text gets resized in a browser or something it won't naturally flow with the image but yet get stuck there and get funky.

Did I lose you guys? Any ideas? Is this possible?

Thanks again :cool:

02-11-2010, 08:01 PM
Perhaps this get you somewhere although you have to go into the source of the page to find out how its done.


02-11-2010, 11:15 PM
Thanks but I don't know... thats some crazy looking source code. Looks so complicated I'm afraid to begin.

02-12-2010, 12:02 AM
Thanks but I don't know... thats some crazy looking source code. Looks so complicated I'm afraid to begin.

Yep! Stu likes to play with CSS. Hence the name of his site :)

He used the <em> tag to achieve the result. Gave them an individual class and in the CSS he gave those classes different widths. The best way to find out is to copy the necessary pieces of codes and paste it to DW and play with it yourself. Perhaps you can get an understanding while doing it.

02-12-2010, 12:20 AM
that site of his is a menace! i love what h does but every time i go there i get into a must revise my sites. You can learn a lot from his work

02-12-2010, 12:40 AM
My head is spinning just trying to track all that out. Just seems like there has got to be an easier way. I don't even need it that complex... This is overall what I'm going for (attached).

I'll keep trying to figure out this source in the meantime but if anyone has a simpler idea for someone still in the CSS 101 stage like me then I'd appreciate it : )

02-12-2010, 12:40 AM
For a image wrap on the top, right and bottom is actually pretty easy. I believe that's what you want. Not totally around it like the link I showed you.

Here is the HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <img src="wrapimage.jpg" alt="" class="img-01" /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

Here's the CSS:

.img-01 {float: left; margin: 10px 10px 10px 0}

02-12-2010, 12:44 AM
I posted above exactly what I'm trying to do.

I realize that I can achieve it by inserting the img tag in the middle of the paragraph but it seems to me that if someone resizes their text or something in the browser window its going to screw everything up? Am I wrong?

02-12-2010, 12:51 AM
No! I tested it for you on a site for a client of mine. Check the following link and notice the image that has a top, right and bottom wrap. Is this what you want?
Ps. the design is not mine, I just developing it :)

02-12-2010, 01:45 AM
Ok, your right. It doesn't behave like I thought it would. Thats exactly what I want. I've now stolen your code!


02-13-2010, 07:21 AM

I will use that if its ok, and if it works in SMF I will donate something via Paypal.

I need it to work in SMF software though so first I will make a test but your link looks really nice.


I thought not, it does'nt work in SMF software but thanks anyway.

Is this BBCode?

02-13-2010, 08:16 AM
Tried again, named the images same as CSS this time but still nothing . The images do go right and left but in the sentence which is no use at all as it interurpts the run of the bloack of text.

One day all this will be just a memory and anything will work in SMF.

Oh yea, I joined CSS Play forum to ask there about SMF and BBcode.