treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Float image at the bottom right hand corner of a div?

  • Is it possible to position an image at the bottom right hand corner of a div (or paragraph) with text flowing above it? I can't seem to find an existing solution... Basically I have a call to action (a "contact me" button) that I want to line-up with the bottom-line of a parargaph on my site (andymacleod.net)

    I know you can use absolute positioning to move an image to the bottom right corner, but that takes it out of the normal flow, and text will not wrap around it. Some people fudge it by placing the image half-way through a paragraph, tweaking it by trial and error... But I'm looking for a definitive solution that will be viable for fluid/responsive layouts. I did read somewhere that it is possible using a table... although I haven't tried it, and I'd rather find a better solution (if there is one).

    Wouldn't it be nice if you could simply float elements vertically too?
  • Basically..you can't do this with pure CSS. I think there may be a JS solution but you would have to google that.