Newbie question: relative positioning and text wrapping

[Skoobouy]

My problem is quite simple. I have an image that I've displaced into the corner of a table. I want the text to wrap around the image -as it is now placed- and not around its original location. Is there a way I can rewrap the text to the translated image?

Let's see - how to describe this better...? I see there are not UBB codes for posting images. May I link to an image?

Thanks for any help you can offer.

[pendanticist]

Welcome to WebmasterWorld [webmasterworld.com] Skoobouy :)

Someone posted this the other day. Sorry, can't recall whom to give the credit to.

<img src='img/foo.jpg' align='right' vspace='2' hspace='2'>

And the text goes around it.

Pendanticist.

[Birdman]

Maybe try Floating [w3schools.com] your image left or right. Then you can apply padding or margin to adjust it's position.

<img src="path/to/image/" style="float: left;" />

[SuzyUK]

Skoobuoy...Welcome

pendanticist...wot no CSS on the CSS forum ;) so I'm taking your nickname literally

Skoobuoy:

CSS
td img {float: right;}

HTML
<table>
<tr><td>
<img src="your.gif" width="30" height="30" alt="" />
lots and lots of text here
</td>/tr>
</table>

if you float an image then type however much text you want it will wrap around...
You can then also give it margins as required to space the text away from the image..

e.g.
td img {float: right; margin-left: 20px; margin-bottom: 20px;}

Suzy

<added>Birdman you must be faster at typing than me!</added>

[pendanticist]

pendanticist...wot no CSS on the CSS forum so I'm taking your nickname literally

CSS?!? Agghh!

Would you believe me if I told you I never noticed the forum? Yikes! :o

Pendanti...uh, Pedanti, no, ummm, Pedicu...

[Skoobouy]

Thank you all so much for the advice. The feedback here is excellent! However, I already know how to wrap text. That isn't the problem I'm describing. (This is why I need a visual aid). Again, the text IS wrapping the image; HOWEVER, it only wraps around the area where the image would be if it wasn't relatively-positioned. So there's a blank backwards-L shape between the image and the text where the text should be.

The special problem is that the content I'm speaking of is all placed inside of a one-cell table.

Here'll, I'll illustrate:

Before CSS:

/-----------------------------\
¦0o0o0o0 Text text text text ¦
¦0imageo Text text text text ¦
¦0o0o0o0 Text text text text ¦
¦Text text text text Text text¦
¦Text text text text Text text¦
¦Text text text text Text text¦
\-----------------------------/

After CSS:

0o0o0o0
0imageo------------------------\
0o0o0o0 * Text text text text ¦
¦* * * * * Text text text text ¦
¦* * * * * Text text text text ¦
¦Text text text text Text text ¦
¦Text text text text Text text ¦
¦Text text text text Text text ¦
\-----------------------------/

The asterisks represent all the extra space I'm trying to fill up. Here's my code so far:

<td width="100%">

<img src="snowman.jpg" style="position:relative; bottom:46px; right:54; float:left;">

Text text text Text text text Text text text Text text
text Text text text Text text text Text text text Text
text text

</td>

Thanks again. Such quick feedback!

Skoo

[Nick_W]

Welcome to WebmasterWorld! [webmasterworld.com]

Hmmm... not sure why you'd need position: relative; in there.

Am I missing something as I'm late to the party? ;)

Nick

[Skoobouy]

CSS is the easiest way for me to take an oversize image and sit it on top the upper-left corner of a content 'window' (a table with one cell). But there are several such windows of varying length. The only way to ensure correct alignment is if I place the image inside the table's content, and then relatively position it above the upper left corner. Unfortunately, position:relative won't change the way the wrapped text interacts with the picture. Hence, my visuals.

If there's any confusion about this, I _do_ have an explanatory image I could link to, if I was given permission.

[Nick_W]

Sorry, no links [webmasterworld.com]

Nick

[Birdman]

Using negative margins should do the same thing for you without relative positioning.

<img src="/****/" style="margin-top: -20px;" />

[Skoobouy]

Hey! That's great! Thanks! :-D

... Update. Well, it almost works. It definitely solves the text problem. Unfortunately, it slides the image under the table corner, and not over it, so I lose most of the image. Think of taking a painting and sliding it underneath the frame. *_* Thanks, though.

[Skoobouy]

Hmm. Would I be able to use the above recently mentioned techinque if I gave the image a layer property and brought it to the front? I'll try it. (Never used layers before; let's see what happens.)

[Birdman]

Yes, you can use the z-index property [w3schools.com]. You're gettin' there ;)

[Skoobouy]

OK! Much success. Here are my notes:

1. Unfortunately, the Z-index property has no effect if I use margin:-x to move the image. The reason is that I'm combining CSS with standard tables. Now, the problem is, when I set the margins of the corner image to negative numbers, the browser understands this to mean that such-and-such x-y coordinates of the image aren't important. Thus, no matter if I set the Z-index to 10000000, the 3/4 of the image that move outside of the <td> cell will never appear. They're doomed to hide behind the table corner.

2. For this reason, it was necessary to use position:relative; - it allows the image to bleed outside of the table cell. One might say that relative positioning gives the image a default Z-index priority.

3. This still leaves me with poorly wrapped text. No problem! I just apply negative margin properties to the other sides of the image, and the text behaves as it ought.

My code looks like this:
<td width="100%">
<img src="gravestone.jpg" align="left" style="position:relative; bottom:45px; right:53px; margin-bottom:-45px; margin-right:-53px;">
</td>

The end result? Each "update window" (a one-celled table with a thick decorated border and text content) has an accompanying graphic that sits on top of the upper left corner; the content wraps smoothly around the lower-right portion of the corner image. Beautiful!

Thanks for your help guys.