Technically speaking, there is often no height:100% style as you have set for #outer in your stylesheet. When this is the case it is because 100% height would mean 100% of the height of the parent element, which itself might not have any height. I'm not sure if this is a bug in this case or just other browsers not following the specification correctly. In any case, Opera 9.5, which is considered a pretty standards compliant browser, shows it the same way as FF 3. Using FF 3's developer tools, I was able to see the #aaaaaa color background if I set an actual height, like 600px instead of 100%. I was also able to see the #aaaaaa background without changing the height by inserting a clear:left division here:
Which is just before the closing </div> tag of the #outer division. What this does is allow the #outer division to assume the natural height of its content, much if not all of which is (presumed to be, since this sort of works) floated left. It is this use of float (if in fact it is used here) that is in part at issue. Technically a floated element has no layout height.
. . . s-blue.png" alt="Valid CSS!" title="Valid CSS!">
<div id="subf . . .
Now, the best solution though seems to be to just (ignore all of the other suggestions I've made and) add the same % height to the container (#wrapper in this case):
Assuming that is, that this doesn't mess it up in other browsers. It did get it closest to how it looks in IE 7 and FF 2.
display: table-cell; /*** For non-IE browsers ***/
position: relative; /*** Let's be nice to IE ***/