Get <p> text to fit in shrink-wrapped wrapper

I'm trying to get the .copy below to shrink-wrap to the width of the image:

HTML:
<div class="post">
  <img src="some/image.png" />
  <div class="copy">
    <p>Morbi dignissim leo a erat tristique eu faucibus dolor commodo. Cras scelerisque, est quis molestie tempus, ante sem fringilla ante, non convallis quam mi ac metus. Donec rhoncus mattis consectetur. Maecenas cursus, dolor ut facilisis consequat, dolor quam interdum quam, vel lacinia arcu neque vel erat.</p>
  </div>
</div>

CSS:
.post {
  float: right;
}

The .post is floated, shrink-wrapping it to the width of its content. This works if there isn't much .copy but when the .copy gets long it expands the .post. Is there a way I can get the .copy to stay with the width of the image?

Unfortunately, the image width changes based on the page width so I can't set an actual sizes. I j开发者_StackOverflow中文版ust want the image to define the .post width itself.

Is there a way to do this without resorting to javascript?

I can't think of any way to do that. However, even if your image is dynamic you could get its size from the server-side (e.g. PHP), or even from Javascript. Then you can add the width to the div.post element to keep everything inside to that width.

Give your image an ID so:

<img id="img1" src="some/image.png" />

Give your p element an id of whatever, I'm calling it 'details'

<script type="text/javascript">
    var img1 = document.getElementById('img1');
    imgWidth = img1.width;
    document.getElementById('details').style.width=imgWidth;
</script>

Updated:

<div class="post">
  <div class="container">
    <img src="some/image.png" />
    <div class="copy">
    <p>Morbi dignissim leo a erat tristique eu faucibus dolor commodo. Cras scelerisque, est quis molestie tempus, ante sem fringilla ante, non convallis quam mi ac metus. Donec rhoncus mattis consectetur. Maecenas cursus, dolor ut facilisis consequat, dolor quam interdum quam, vel lacinia arcu neque vel erat.</p>
  </div>
</div>