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 behaviour.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.

Answer 1

Unfortunately, this is one of those cases where it is probably best to reconsider the requirement or go forward with what feels like a hack IMHO.

This is a tough requirement because positioning the item will take it out of the flow of the document and, therefore, kills the wrapping. Floating, like you said, makes it hard to position.

I have seen people accomplish this programmatically (JavaScript) and have even seen some CSS hacks that involve CSS3 transforms work. So, I guess it can be done, but neither of these are an ideal solution and each undoubtedly presents drawbacks.

The one thing I have learned about technology over the years is that what most people think is simple is really hard and the things people think are impossible are often times rather simple.

That's just my two cents. All the best!