Float a <div> in bottom right corner of paragraph

Discussion in 'HTML' started by J Rice, Jul 25, 2006.

  1. J Rice

    J Rice Guest

    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
     
    J Rice, Jul 25, 2006
    #1
    1. Advertising

  2. J Rice

    Els Guest

    J Rice wrote:

    > Hi,
    > I'm trying to work out how to float a <div> box in the lower right
    > corner of a paragraph.


    [snip]

    > 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?


    You don't. It just doesn't work.

    --
    Els http://locusmeus.com/
     
    Els, Jul 25, 2006
    #2
    1. Advertising

  3. J Rice

    J Rice Guest

    Els wrote:
    > J Rice wrote:
    >
    > > Hi,
    > > I'm trying to work out how to float a <div> box in the lower right
    > > corner of a paragraph.

    >
    > [snip]
    >
    > > 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?

    >
    > You don't. It just doesn't work.


    Aha. I wonder if that explains why I haven't been able to figure it
    out.
     
    J Rice, Jul 25, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. csgraham74
    Replies:
    2
    Views:
    408
    csgraham74
    Aug 11, 2005
  2. ©®
    Replies:
    14
    Views:
    15,118
    Jonathan N. Little
    Nov 4, 2005
  3. bd
    Replies:
    0
    Views:
    635
  4. Michael
    Replies:
    1
    Views:
    157
  5. Replies:
    0
    Views:
    157
Loading...

Share This Page