Newby image/ text wrap question

[laura.paterson]

Hi,

I'm new to html, and having difficulty getting my text to wrap around
an image the way I'd like it to..

I have an image in the top left corner of a component, and if there is
space, I'd like my text to start at the top right and wrap around the
image. However, if there is a long word in my text (which is longer
than the available space between the image and the left edge of the
component) the the image overlaps the text. Ideally I'd like the text
to begin under the image if one of more of the words are too long for
the available space.

An example of my current text snippet is as follows (note, the size of
the component is determined programmaticall y by my application):
<p><img align="right"
src="http://www.travelodge. co.uk/images/location_maps/dunfermline_s01 21.gif"
/></p>
<p>ujfyjty:Whku ykyuat thffzfdbgdfbdxf bgtfh
gfmfdnfgbfdxvzd sgvfgdszrvfdgdf gdvfd fdggggggggggggg ggggggggggggggg dfg
drgegevxddddddd dddddrers:<p>

So far I can only get the effect I want by adding it into a table - is
this the only way it is possible?

Cheers,
- Laura

[Jukka K. Korpela]

Scripsit la************@ gmail.com:

I have an image in the top left corner of a component, and if there is
space, I'd like my text to start at the top right and wrap around the
image.

I think you have "left" and "right" swapped here, as compared with the rest
of the problem description.

However, if there is a long word in my text (which is longer
than the available space between the image and the left edge of the
component) the the image overlaps the text.

This is an Internet Explorer bug.

Ideally I'd like the text
to begin under the image if one of more of the words are too long for
the available space.

That's what Firefox does.

So far I can only get the effect I want by adding it into a table - is
this the only way it is possible?

Floated elements - whether you float them using align="..." attributes in
HTML or the float property in CSS - suffer from some implementation problems
that reduce their attractiveness.

In this case, however, it seems that the problem can be fixed by making the
block-level container (in your example, <pelement, but I would rather use
<div>, since an image does not really constitute a paragraph) floated,
rather than the image itself. You would need to set an explicit width for
the container, so you may need to modify the code that generates the page.
Example:

<div style="width: 270px; float: right"><img
src="http://www.travelodge. co.uk/images/location_maps/dunfermline_s01 21.gif"
alt="(Map of Dunfermline area.)"></div>
<p>ujfyjty:Whku ykyuat thffzfdbgdfbdxf bgtfh
gfmfdnfgbfdxvzd sgvfgdszrvfdgdf gdvfd fdggggggggggggg ggggggggggggggg dfg
drgegevxddddddd dddddrers:</p>

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/