Is it possible to use pure CSS to resize a div's width based on contained image width, but not when browser window resizes?

Question

I'm making a tumblr theme and I'm creating a div around each rendered post. I have, for my index page, the images of photo posts set to have a width of 400px, using the markup

<img src="{PhotoURL-400}" width="400" alt="{PhotoAlt}" />

This looks fine with photo posts, but sometimes text posts get several series of blockquotes, and those can contain images which will unfortunately expand outside of the box.

Some clarification: on tumblr, a "photo post" is an image with an HTML caption, while a text post is basically just some HTML. The image outside of this HTML caption is constrained to the size I set in my template markup, but the images inside the HTML caption (and in text posts in general) are not.

The behavior I am seeking is that these divs will always be 400px wide, with 10px padding on all sides, unless contained content overflows outside of the container, in which case the width will adjust to fit that content. But, changing the size of the browser window should not affect the size of the divs. The image inside the HTML caption should never resize; it is a separate case from a photo post's image.

Here's how the markup looks:

<div class="post-box">
  <article class="post">
    <p>...</p>
    <blockquote>
      <p>...</p>
      <p>
          <img src="..." />
      </p>
    </blockquote>
    <p>...</p>
  </article>
</div>

My CSS thus far is as such:

.post-box {
  display: block;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  opacity: 0.8;
  background-color: {color:Postbox Color};
  {block:IndexPage}
    min-width: 400px;
    width: 0%;
    max-width: 800px;
  {/block:IndexPage}
}
.post-box img {
  display: inline-block;
  line-height: 0;
}

Is there a way to do this with pure CSS?

Edit: this diagram may help clarify my needs. Here is a fiddle too: http://jsfiddle.net/B35AW/1/

Answer 1

I was unable to find a pure CSS solution for this, but I did write some JavaScript which took care of my solution (using jQuery):

function boxExpandForContents() {
  $.each($('.post-box'), function(i, box){
    var width = 0, $box = $(box);
    var padding = parseInt($box.css('padding-left')) + parseInt($box.css('padding-right'));
    $.each($box.find('p img'), function(j, img){
      width = (img.x + img.width > width) ? img.x + img.width : width;
      if (width > 800) {
        width = 800;
        $(img).width(width - img.x);
      }
    });
    width = width - padding;
    width = (width > 500) ? width : 500;
    $box.width(width);
    $box.find('.post-info').width(width);
  })
}
$(document).ready(function() {
  boxExpandForContents();
});

Using $box.find('p img') let me grab any images what were in the HTML rendered by the {Caption} token. This was the best I could do.