DIV widths

One of the things that's been most frustrating developing websites like Quisition, habitualist and the new Cats or Dogs is the difference between Firefox and Safari (and I guess IE) in determining the width of a block.

Firefox only makes a div as wide as the content needs to be (plus any padding). Safari makes the div as wide as the parent div (minus the parent's padding and the div's own margins).

In different situations, both approaches are desirable.

Short of fixing the width (which does give the same behaviour on both Firefox and Safari) how does one (with CSS) make Firefox behave like Safari or Safari behave like Firefox?

UPDATE: Okay, debugging 101: find the smallest thing that reproduces the problem. It turns out to have to do with multiple embedded floats. The following behaves differently in Firefox and Safari:

<div style="float: left;">
    <div style="float: left;">
        <div style="width: 400px;">foo</div>
        <div style="background: #CCC;">bar</div>
    </div>
</div>

In Firefox, bar's background is only as big as the text. In Safari it extends 400px.

UPDATE (2007-09-19): Courtesy of William Bardon, now see http://jtauber.com/2007/09/div_test.html

A screen shot of that, with the window narrow enough that the third test isn't on the same line as the second is at http://jtauber.com/2007/09/tauber_bardon_test_safari.png

The same thing in Firefox can be seen at http://jtauber.com/2007/09/tauber_bardon_test_firefox.png