Question

I have the follow html structure:

<div id="container">
    <div id="block1">
        <img src="someimage/path" />
    </div>
    <div id="block2">
        Some Text
    </div>
    <div id="block3">
        Some Text
    </div>
</div>

the container is float:left. The container will stretch out to the widest div, but what if i only want it to follow block1, and have block2 and block3’s text to wrap according to how big the image in block1 is. For my markup right now, if the text is long it will push out the container div as far as the text goes out, but I want the text to only be as wide as the image, almost like an image caption. Any ideas?

Answer 1

Make the container display:inline-block; with overflow:auto; so that it automatically stretches to fit the content. Give Block #2 and Block #3 overflow:auto; too so that they stretch to fit their content.

Unfortunately, you need to use JavaScript to get the width to be the width of the image. See my example below, where I fix it with jQuery.

See: http://jsfiddle.net/TFLMX/2