Making floated div shrink instead of dropping to new line

Have you tried experimenting with giving these two divs relative (such as a percentage) widths?

When you float without explicitly declaring a width, either fixed or relative, the dimensions will default to 'auto'. Auto will force the div to be the width of it's content. When the browser shrinks, the content will still force these boxes to that width, until it is forced to collapse by touching another element.

Using auto widths is not the best way to achieve fluidity in your layout. You'll need to specify some kind of relative dimension somewhere, otherwise this problem will be entirely unavoidable.

There are lots of resources out there which can help you achieve a more fluid layout (a lot of articles on www.alistapart.com discuss this in quite some depth).