I know, there is no such things as float:bottom in CSS but it would be handy if there were. The specific scenario I came across which triggered this thought was the requirement to have a div fixed to the bottom right corner of a site but allowing the text in the container div to wrap around it. You couldn't do this with a footer as there would be no wrap and position:absolute will superimpose the div on anything else that is there. I wondered if it were possible to mimic this situation by having two divs, both floated right and stacked on top of each other. The upper div would have essentially no content and be very narrow but would be tall enough to push the second div down to the bottom. Something like this:
The first step was to create the basic structure: I set up two divs stacked vertically inside and on the right hand side of a wrapper div by making the divs float right and the giving the second a clear:right so that it drops below the first. The top right hand div is set narrower than the lower one and I add a clearing div at the end of the wrapper so that it contains the two floats.
It looks like this.
Now unless you are using a particularly clever browser you can see that I have immediately hit a problem. The content of the wrapper should wrap around the two right floated divs but the first line of text that abuts the second of the right divs (and only that line) overlaps that div. The line of text seems to be wrapping as if it is on the same line as the first div. Subsequent lines wrap correctly. It transpires that this is a known bug for Firefox (thanks to Lem3 of the KompoZer Forum for pointing me to this) but also appears on IE and Safari.
There is more than one solution here. You can get around this by giving the second right div a margin-top that is high enough to move the div below the offending non-wrapping line of text but my preference is to add filler div between the two exisiting divs on the right. This time it is narrow vertically (a 1px height works in most cases but 1em is better visually) and the same width as the original second right div (including the relevant borders, padding etc.).
It now looks like this - much better!
The end result can be seen here.