I have floated images and inset boxes at the top of a container using float:right (or left) many times. Now, I need to float a div to 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.
35 Answers
Set the parent div to position: relative, then the inner div to…
position: absolute;
bottom: 0;
…and there you go 🙂
