How do I get a div to float to the bottom of its container?

Question

I have floated images and inset boxes at the top of a container using float: right (or left) many times. Recently I hit a need to float a div at the bottom right corner of another div with the normal text wrap that you get with float (text wrapped above and to the left only).

I thought this must be relatively easy even though float has no bottom value but I haven't been able to do it using a number of techniques and searching the web hasn't come up with anything other than using absolute positioning but this doesn't give the correct word-wrap behavior.

I had thought this would be a very common design but apparently it isn't. If nobody has a suggestion I'll have to break my text up into separate boxes and align the div manually but that is rather precarious and I'd hate to have to do it on every page that needs it.

EDIT: Just a note for anyone who comes here. The question linked above as a duplicate is in fact not a duplicate. The requirement that text wrap around the inset element makes it completely different. In fact, the response to the top voted answer here makes it clear why the answer in the linked question is wrong as a response to this question. Anyway, there still doesn't appear to be a general solution to this problem but some of the solutions posted here and in the linked question may work for specific cases.

Answer 1

You can try setting the parent div to position: relative, then the inner div to...

position: absolute; 

bottom: 0;