Preventing image overlapping text?

[kapow]

I'm using 'aling right' on an image so text flows nicely round the image. If the window size is reduced a lot then the image overlaps the text.

Is there a way to stop overlap?
Or at lease have the text on top?

<img src="pic.jpg" ..... align="right">

[Nick_W]

Yes.

give the image a margin and use float instead.

.imageright {
  float: right;
  margin: 5px;
}

Nick

[tedster]

One way would be to use a layout that forces a minimum width. Then, with a very small window you get horizontal scrolling, but at least the page stays usable.

The min-width attribute for a div (CSS-2 browsers only) is a good way to do this in a liquid layout.

Also, just a note that align is a deprecated attribute in HTML. The recommendation is to move it to CSS.

[Nick_W]

Only problem is that IE doesn't support it Tedster, which unfortunately makes it next to useless :(

Nick

[Gene]

I've had the EXACT SAME annoying problem on my photo album layouts.

Mind you though, I'm still a Table guy. The solution I found might have a related counterpart in "CSS Land."

In my case, I had to adjust the table width to accomodate the text and graphic. The example below would be changed from 80% to perhaps 100% width.

BUT, another solution that also helped was putting in a <br> tag in the text... Notice that I forced "That's all Folks!" to take up 2 lines. This solution actually helped a lot more than adjusting my Table widths.

<table width="80%"><tr><td>
<img src="PIC.jpg" align="right">
<BR>
That's all<BR>
Folks!
</td></tr></table>

[edited by: Gene at 5:49 pm (utc) on Aug. 2, 2002]

[tedster]

LOL! I barely ever use IE these days, except when testing a new page template.

A hack which would probably work is a 1px high invisible gif that was the minimum width you desire. You could place it anywhere that was unobtrusive.

[Nick_W]

Me too Tedster, Opera all the way!

Actually the best solution IMO is not to worry about it!

If people have tiny window sizes they will expect oddities like that...

Nick

[rewboss]

CSS float:right; does the same job as HTML align="right".

Basically, what it does is to remove the object (it doesn't have to be an image) from its usual position (a bit like position:relative; does) and moves it to the right until it bumps up against either the edge of the containing element or another floated element.

The object is now removed from the normal flow of the text. Text will, however, flow around the object -- as long as it can break the lines at convenient places. If it can't, then it has no choice but to appear superimposed over the floated object.

If you didn't float the object, and the object was too wide, it would force horizontal scrolling. But that's because the object would be part of the text flow itself. Once you float it, it's taken out of the flow.

The cure is to make sure that your images aren't too wide for the containing element and the text that has to flow around it. If, at 800x600, there is not enough room for about five or six average-length words on one line (this is a guesstimate), you will need to either reduce your image or widen the containing element. Or find some other solution.