How to wrap text round image

**zenda** · 10-02-2006, 12:29 PM

Hya,

I am working with SMF softwareand I need my images surrounded by text like this web site: http://news.bbc.co.uk/1/hi/world/mid...st/5398706.stm I have tried everything to no avail.

Things I have tried:

Code:


	HTML Code:
	<IMG SRC="http://www.katesdreamweavercentre.com/katalina/images/du2.img357/4145/avatar19159eh.gif" BORDER="0" VSPACE="0" HSPACE="5" ALIGN="left" ALT="An image">
Line 1<BR>
Line 2<BR>
Line 3<BR>
Line 4<BR>
Line 5<BR>
Line 6<BR>
Line 7<BR>

That leaves a huge space at one side.

The software does'nt allow <div></div>

I have this code that works but again with gaps:

Code:

<div>Demand and prices were improving in Japan, brightening supply prospects from Southeast Asia. However, sourcing from Indonesia remained restricted amid tight raw wood availability. China was forecast to demand 5 million m3 more of tropical timber by 2010, but supply constraints might not meet this demand. Meanwhile, Taiwan PoC might emerge as the world’s largest furniture producer. The UK wooden window sector was swinging away from PVCu in favour of more environmentally friendly materials such as timber. The US housing sector showed mixed results in August.right][/right]Demand and prices were improving in Japan, brightening supply prospects from Southeast Asia. However, sourcing from Indonesia remained restricted amid tight raw wood availability. China was forecast to demand 5 million m3 more of tropical timber by 2010, but supply constraints might not meet this demand. Meanwhile, Taiwan PoC might emerge as the world’s largest furniture producer. The UK wooden window sector was swinging away from PVCu in favour of more environmentally friendly materials such as timber. The US housing sector showed mixed results in August.</div>

Is there something I should have in CSS?

Code:

divimage img {
float: left;
}
divimage img {
float: right;
}

Any help would be fantastic

Thanks!

**LadynRed** · 10-02-2006, 01:10 PM

Float the image left or right, I usually just use a class on the image.
Adjust padding on the class to leave some space around the image.

Clear your float after the end of your <div>.

**zenda** · 10-02-2006, 01:15 PM

Ladynred,

SMF in posts does not allow <div> - its a right pain!

Thanks anyway, I may need to change software to get the look I need.

**zenda** · 01:42 PM

Hi again ladynred,

This is supposed to work but does'nt:

<img src="http://www.katesdreamweavercentre.com/images/du2.jpg[/img]"class="floatLeft">
<p>The images are contained with...</p>
<img src="http://www.katesdreamweavercentre.com/images/du2.jpg[/img][/sunset.gif" class="floatRight">
<p>This second paragraph has an...</p>

I notice the tags are the same here as they are in SMF [img] etc.

**LadynRed** · 10-02-2006, 04:44 PM

You don't need a <div> to float the image. Putting the "class="floatleft" on the IMG itself is sufficient.

What's wrong with the above code is that the 'class="floatLeft" is not INSIDE the <img> tag and it must be in order to work.

<img class="floatLeft" src="xxxxx/xxxx.gif" width="20" height = "120" alt="" / >

**smokescreen** · 10-02-2006, 10:02 PM

Well, for something a lot simpler that worked for me awhile back-

<IMG SRC="IMAGE URL" BORDER="0" ALIGN="right" width="WIDTH#" height="HEIGHT#">
Following that code with whatever text created the wrapping effect that you seem to want. I'm sure the align can be changed to 'left', I'm not sure about 'center' though. I've never tried...and I'm not sure if this still works. Give it a shot.

**LadynRed** · 10-03-2006, 11:02 AM

That is not 'simpler' it's adding old code that can easily be avoided using CSS, which is cleaner and much more efficient.

**jammy4u** · 10-03-2006, 01:23 PM

Thnx For Help