first of all you addressing div.img in your css when the div is called "img left" so try this
<div class="img-left">
<img src="img/keyboard.jpg" />
<p>When I have a long caption, it sticks out. How do I make it wrap?<p>
</div>
.left {
float: left;
}

#main div.img-left {
margin: 0.3em;
background: url(img/img-bg.png) repeat-x;
}

#main div.img-left img {
margin: 0.3em;
}

#main div.img-left p {
background: url(img/caption-bg.png) repeat-x;
font-size: 0.5em;
color: #5B6873;
padding: 0.2em;
display: block;
}

i think the display "block" might do it.

sorry i couldnt be of more help.
i like that trick. thanks

I don't have an answer unfortunatly, but just to let you know when i've tried to look at your site i've been told by both Google Desktop and the latest build of Firefox 3 that your site is dangerous and to not enter it, it looks like it's coming from your wp stats, this is probably something you should look at dealing with.

What is the current listing status for samnabi.com/?

Site is listed as suspicious - visiting this web site may harm your computer.

Part of this site was listed for suspicious activity 2 time(s) over the past 90 days.

What happened when Google visited this site?

Of the 4 pages we tested on the site over the past 90 days, 4 page(s) resulted in malicious software being downloaded and installed without user consent. The last time Google visited this site was on 05/18/2008, and the last time suspicious content was found on this site was on 05/18/2008.

Malicious software includes 16 trojan(s). Successful infection resulted in an average of 2 new processes on the target machine.

Malicious software is hosted on 1 domain(s), including wp-stats-php.info.

Has this site acted as an intermediary resulting in further distribution of malware?

Over the past 90 days, samnabi.com/ appeared to function as an intermediary for the infection of 2 site(s) including acousticsam.tk, acousticsam.com.

Has this site hosted malware?

No, this site has not hosted malicious software over the past 90 days.

How did this happen?

In some cases, third parties can add malicious code to legitimate sites, which would cause us to show the warning message.

Next steps:

* Return to the previous page.
* If you are the owner of this web site, you can request a review of your site using Webmaster Tools. More information about the review process is available in Google's Webmaster Help Center

Source

Without applying the width to the containing div (which you don't want to do) there isn't much you can do with CSS to fix this as there is no way of saying "Make this have the same width as the width of the image (whatever it might be)".

There is one CSS property you could use though... if you add "white-space: pre;" to your p tag and then add a carriage return to your caption wherever you want it to break, then it will be fine.

You will just have to make sure you remember to add carriage returns to your captions when needed.

Otherwise, the only other alternative (that I can think of) is to use javascript to get the width of the image and apply it to the caption or surrounding div.

Setting:

.img-left p{
max-width:100%;
}

Works in Firefox...

Firefox 3 now ignores the "max-width: 100%;" trick.
Dang.

Anyone else come up with a CSS solution? I suppose there really isn't one.