Words not wrapping in DIV

Nesting DIV with float:left, but text does not wrap

[RJell]

I'm trying to do a fairly simple layout with an image on the left side, a caption below it, and a block of text wrapping around the image/caption block. This is easy enough by simply doing a "float: left" on the image/caption block, but unfortunately the layout looks bad if the text is wider than the image because it pushes the "wrapping" text way off to the right. I can get around this by assigning a width to the div that contains the image and caption, but I hate to do that because this is going to be a layout that many different people use and there's no telling what size their images will be...

Here's my css:

#menu{
padding: 2px;
float: left;
font-size: 200%;
font-weight: bold;
margin-right: 10px;
}
#content{
float: left;
}

And here's the html:

<div id="content"><div id="menu"><img src="someimage.jpg" width="232" height="150"><br>
"lorem ipsum dolor sit amet..."</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

I know that everything is behaving how it should, but I'd love to find a way for the text to only be as wide as the image without forcing users to put br's in their captions. Any advice would really be appreciated.

[grahamstewart]

A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).

- [w3.org...]