By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,836 Members | 2,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,836 IT Pros & Developers. It's quick & easy.

Newby image/ text wrap question

P: n/a
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 programmatically by my application):
<p><img align="right"
src="http://www.travelodge.co.uk/images/location_maps/dunfermline_s0121.gif"
/></p>
<p>ujfyjty:Whkuykyuat thffzfdbgdfbdxfbgtfh
gfmfdnfgbfdxvzdsgvfgdszrvfdgdfgdvfd fdggggggggggggggggggggggggggggdfg
drgegevxddddddddddddrers:<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

Dec 18 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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_s0121.gif"
alt="(Map of Dunfermline area.)"></div>
<p>ujfyjty:Whkuykyuat thffzfdbgdfbdxfbgtfh
gfmfdnfgbfdxvzdsgvfgdszrvfdgdfgdvfd fdggggggggggggggggggggggggggggdfg
drgegevxddddddddddddrers:</p>

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

Dec 19 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.