Align Image Bottom Left in Div, With Text Wrap

  • funnyphoners

    (@funnyphoners)


    13 years ago

    I’ve researched this for days – and as far as I can tell, it can’t be done: As the title says, I’d like to have a div full of text, with an image aligned to the bottom left of the div, and text wrapping along the right of the image.

    text text text text
    text text text text
    _____ext text text
    image| xt text text
    goes | xt text text
    here | xt text text

    Here’s the div that contains the text:
    div.listener_call_nested_left_box{
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    width: 25%;
    border: 1px solid #c0c0c0;
    background-color: #ffffff;
    }

    And the current image class which includes nothing about vertical alignment:
    img.alignleft {float:left; margin: 5px 10px 0px 0px; }

    Thanks for any help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • BrianWK

    (@brianwk)

    I think you may have found yourself in a tricky spot. Provided your div will stay the same size, and the amount of text will stay about the same, your best approach would be to insert the picture inside of the paragraph like you see here.
    I’m not sure if that helps, but I think you are right, there is no way to do that with pure css.

    Thread Starter funnyphoners

    (@funnyphoners)

    Yes, thank you BrianWK, that’s one of the many discussions I found in my searches.
    Indeed there are many ways to “fake” the appearance I’m after, such as the one you mention. On my own site, in a fixed size rectangle, I’ve put an image in the lower left of a background div, then I simulated text wrapping by indenting the final lines of text in the foreground div.
    But obviously this isn’t a good workaround for a liquid layout.
    Apparently this is one of those rare examples of common layout scheme used in print that can’t be executed with css …

    BrianWK

    (@brianwk)

    I played with it for a couple of hours, and no luck. It seems crazy that it can’t be done, but I guess that its just one of those things. Maybe someone else will come up with it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Align Image Bottom Left in Div, With Text Wrap’ is closed to new replies.