Float:bottom

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:

Column Schematic

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!

Now we have to work out a way to have the first right div the correct height to displace the second right div all the way to the bottom of the wrapper. I have not managed to find a way to do this purely by CSS as you can't set relative heights on the internal divs without setting them on the body too but have found that you can use a simple javascript instead. This simply grabs what would have been the original wrapper and second div height, subtracts one from the other and makes the first right div that high, here is the script:

<script language="javascript" type="text/javascript">

window.onload = floatbr;

function floatbr() {

var f = document.getElementById('firstright') // Get div element
var s = document.getElementById('secondright') // Get div element
var w = document.getElementById('wrapper') // Get div element
var sh = s.offsetHeight // secondright div height
var wh = w.offsetHeight // wrapper div height
f.style.height = wh - sh + 'px'; }

</script> 

The end result can be seen here.

This does the job fairly well, there's a little variability in placement between browsers and it only works properly on a fixed width wrapper. If you allow a fluid width then the div will move relative to the wrapper text if the window is resized. Trying to address this in the javascript by using the window.onResize function crashes IE so I need a little more insight into javascript before I progress from here.