CSS - div width depending on image size above

Answer 1

If I understood you correctly,

If the image is the same size as the div (Black border) then the text will automatically do what you want. Or try overflow: none; on the div.

But, personally I wouldnt do it like that. Divs are flexible and scalable So I would say use 2 or 3 divs within each other.

e.g.

<div id="black-border">

<div id="for-image">

<div id="the-image-itself">
<img src="image.jpg"/>
</div>

<div id="the-comment">
<p> This image is awesome</p>
</div>

</div>

</div>

just give the image a fixed size and enter the comment. you can also set

#the-image-itself, #the-comment{
display: block;
}

If you like

hope this helps :)

Answer 2

a Google search throws up the fact that this question has been asked a million times and that there is still no satisfactory way without attaching a width to the container

However...

This I think is a job best handled by the table element - the table element has a caption element which I would say is the tool for the job?

All browsers except IE6/7 handle the following bit of code well - IE6/7 handle it as far as the width goes, but it does not support the CSS caption-side property so it will not put the caption underneath the image - which may or may not be a problem - IMHO it will still look pretty (in those frames ;)) but YMMV, maybe an alternative if you really really don't want to script a width in

<div class="content">
<table summary="image with caption">
<caption>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</caption>
<tr>
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td>
</tr> 
</table>
</div>

CSS:

.content {
  float: left;
  padding: 20px;
  border: 2px solid #000;
}

.content table {
  border: 0;
  border-collapse: collpase;
}

.content td {
  padding: 0;
}

.content caption { 
  caption-side: bottom; 
}

Answer 3

fwiw the smallest jquery I came up with is this

<div class="caption_wrap" style="float:right">
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br />
this is some caption text, this is some caption text, this is some caption text, this is some     
caption text</div>

quick.

Answer 4

the problem with your request is that if the div doesn't have a specific width the text doesn't "know" when to wrap and that's why it uses the width of the outter div...

So... You need to add a width to the outter div or in case of using a div that surrounds the image + text, a width in that div.

EDIT:

here you go: http://jsfiddle.net/jnmtu/

I made a test (on my example is the third one) with a table to test it first and to refresh my mind of how it works with tables, and then I applied it to the CSS way.

How it works:

You need to have a surrounding div that has a minimal width (1%), and make it display as a table; then the inner div (corresponding to the "cell") should have an auto height and hidden overflow, this is needed to "force" it to strech the div's width + height (it's a common trick).

NOTE: I haven't tested in Internet Explorer, it does work with Firefox and Safari.

Answer 5

@JackJoe said it well, you need to set a width to the wrapping div to match the width of the inner image.

Here is one way of doing it: http://jsfiddle.net/audetwebdesign/bpN8x/

Basically, I use jQuery to determine the width of the image and then set the width of the wrapper div.

Alternatively, if you were feeding the image from a CMS, you could determine the width of the image dynamically and then set the width on the wrapper div using an inline style.

I don't think a CSS-only is possible because of the way the box-model determines widths as content is laid out. Widths are inherited from the parent element, and are not passed up from the children elements.

Answer 6

What would be needed is a width attribute like availabe in Android layouts, which is named width: wrap-content. Maybe this would be a good proposal for CSS, as it has proven handy in designing screens.