How to wrap text around a image in thml?

Hi all,

Can anyone help me with wrapping text around the image. You can see here (amazon image) that the image is above the text. However, I want the image to be displayed to the right hand side of the text.

Here is the code I'm using:

<h4>1. Lonely Planet London</h4>

<iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=absthewor-21&o=2&p=8&l=as1&asins=1740598318&fc1=000000&IS2=1&lt1=_blank&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" class="alignright" marginwidth="0" marginheight="0" frameborder="0"></iframe>

Diverse, energetic and perennially inspiring, London has a lifetime's adventures in one city. Stroll the Millennium Bridge from Tate Modern to St Paul's, browse the boutiques of King's Road and Brick Lane, explore Soho's buzzing streets or Hampstead's soothing heath. Temporary traveler or long-term Londoner, find the city's heart with this smart and stylish guide.

Can anybody help me?

Thanks!

 

I don't know much about iframes, but I know if you use the <img> tag, you can put align="left" and I think you can put that as an attribute in the iframe tag too.

 

You should be able to wrap a div around the iframe and use style="float:left" as an attribute.

 

I don't know anything about iframes and your styling is deprecated (old-fashioned and no longer valid). So, I can tell you how to do it with modern code and css, but you might have trouble implementing it.

In modern HTML, the document flows. The flow is the "normal" order of things. You write a <div> and then another <div> and they naturally stack atop each other. Now technically an image is not a stacking box but an inline element, but it doesn't act like one here.

What you want to do is have a box (a div or whatever) which contains both your image and your text. The image can be floated right (with float: right; )and the text will flow around the image.

Like this:

(I'm assuming the h4 belongs only with this piece of text and image)
HTML:

<div id="london">
  <h4>1. Lonely Planet London</h4>
<img src="pathandnameofimage.jpg" width="whatever" height="whatever" alt="The city of London" />
  <p>Diverse, energetic and perennially inspiring, London has a lifetime's adventures in one city. Stroll the Millennium Bridge from Tate Modern to St Paul's, browse the boutiques of King's Road and Brick Lane, explore Soho's buzzing streets or Hampstead's soothing heath. Temporary traveler or long-term Londoner, find the city's heart with this smart and stylish guide.</p>
</div>

Code (markup):

And the CSS (to style your text and image):

#london {
  width: whatever the width of the whole box will be ;
  height: auto;  <---so the box grows if text is added or enlarged
  padding: 5px;  <--or whatever
} 

h4 {
  style the h4
}

img {
  border: none;
  float: right;
  display: inline; <--hack so IE6 doesn't double the margins, use only if you need it
}

p {
  style the text here
}

Code (markup):

I think I did that right. Anyway, the rule for floats is that they need a width defined, usually in the CSS-- but in the HTML the image width is already defined, so that's cool. Text should wrap around the image if I don't have a bug in my code : )

But like I said, dunno how you would implement it. I have no clue about frames or iframes.

 

thats not text wrap.

 

It's not an image; it's an i-frame. I think that it's impossible to wrap text around an i-frame.