CSS parent element ignore the text within child element to determine width

Question

Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.

<div>
    <img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
    <p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>

div {
    background: green;
    display: inline-block;
}

my jsFiddle

Any advice is greatly appreciated

Answer 1

Change display property of div to table-caption
(Tested in firefox and chrome)

Updated jsfiddle

Answer 2

Here's the best that I've found:

http://jsfiddle.net/y8Qnd/3/

What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.