0

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 just want the image to define the .post width itself.

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

jonathanpglick
  • 306
  • 2
  • 11

2 Answers2

0

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>

  • Yeah, I know how to do it easily with JS but was wondering if it could be done with just CSS. – jonathanpglick Sep 08 '10 at 16:24
  • Yes, try using another div that only encapsulates both the image and the copy. Then you can position that div anywhere you want inside the post div –  Sep 08 '10 at 16:29
0

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.

Community
  • 1
  • 1
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290