Posted by J Rice on 07/24/06 23:28

Hi,
I'm trying to work out how to float a <div> box in the lower right
corner of a paragraph. I have no trouble getting it to work in the
upper right or upper left corners and having the text wrap around the
box as expected: ie

AA XXXXXXXXXXXXXXX
AA XXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX

or

XXXXXXXXXXXXX AA
XXXXXXXXXXXXX AA
XXXXXXXXXXXXXXXX

What I want, however, is:

XXXXXXXXXXXXXXXX
XXXXXXXXXXXXX AA
XXXXXXXXXXXXX AA

I have tried using position:relative and top:, but while this moves the
box (AA) to where I want, the text (XX) doesn't wrap around it -- it
runs through/behind it. Using a margin:top or padding-top: value
results in a different problem, where the text XX no longer runs over
the box, like this:

XXXXXXXXXXXX
XXXXXXXXXXXX AA
XXXXXXXXXXXX AA

How do I do this? It seems like the normal behavior is for the top of
the floated box to be aligned with the top of the first line of the
parent container. So how do I get it so the bottom line is aligned
with the bottom line of the parent instead?

Jeff

[Back to original message]