Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: incrediBILL
Is there a way to stop overlap?
Or at lease have the text on top?
<img src="pic.jpg" ..... align="right">
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.
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.
<img src="PIC.jpg" align="right">
[edited by: Gene at 5:49 pm (utc) on Aug. 2, 2002]
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.