Shrink-to-fit browser differences

Question

The following code illustrates a shrink-to-fit (shrink-wrap) difference between browsers. All my Mac browsers shrink the yellow area as intended if the browser window is wide enough to allow the red, green and blue boxes to be on one line. However, if I reduce the window width to force one or two of these boxes onto other lines Camino 1.6.9 and IE 5.2.3 continue to shrink-to-fit but Firefox 3.5.2, Safari 4.0.3 and iCab 4.5 fill the brown box with yellow. Can anybody tell me what to do to get Firefox, Safari and iCab to shrink-to-fit as intended? Please see my demonstration page at: http://links.open.ac.uk/www/shrink-wrap/
<div style='overflow: auto; background: brown'>
<div style='float: left; margin: 10px; background: yellow'>
<div style='float: left; margin: 10px; width: 300px; height: 100px; background: red'></div>
<div style='float: left; margin: 10px; width: 300px; height: 100px; background: green'></div>
<div style='float: left; margin: 10px; width: 300px; height: 100px; background: blue'></div>
</div>
</div>
<div style='float: left; margin: 20px; width: 300px; height: 100px; background: purple'></div>

Answer 1

I have rewritten my page at http://links.open.ac.uk/www/shrink-wrap/ and would appreciate any constructive comments.