Newby image/ text wrap question

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View


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 programmatically by my application):
<p><img align="right"
<p>ujfyjty:Whkuykyuat thffzfdbgdfbdxfbgtfh
gfmfdnfgbfdxvzdsgvfgdszrvfdgdfgdvfd fdggggggggggggggggggggggggggggdfg

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

 - Laura

Re: Newby image/ text wrap question


Quoted text here. Click to load it

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

Quoted text here. Click to load it

This is an Internet Explorer bug.

Quoted text here. Click to load it

That's what Firefox does.

Quoted text here. Click to load it

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, <p> element, 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.

<div style="width: 270px; float: right"><img
alt="(Map of Dunfermline area.)"></div>
<p>ujfyjty:Whkuykyuat thffzfdbgdfbdxfbgtfh
gfmfdnfgbfdxvzdsgvfgdszrvfdgdfgdvfd fdggggggggggggggggggggggggggggdfg

Jukka K. Korpela ("Yucca")

Site Timeline