Shrink divs and paragraphs based on image?

Question

The code below is a simplified version of my site. On my site, the width of the image varies from page to page, and the text is about 100 words. This means that the paragraph stretches the DIV to be wider than the image. Using only CSS, is it possible to reduce the size of the DIV and paragraph to the width of the image?

Jsfiddle here

An example of what I am trying to describe here . Top is what I get, bottom is what I want.

HTML

<div> <img src="image.jpg" /> <p>Lorem ipsum dolor sit amet.</p> </div> 

CSS

 div { display: inline-block; } 

Answer 1

And in order to associate something with the table, I will forever call myself: http://jsfiddle.net/WM6hK/3/

 div { display: table; border: 1px solid red; width: 1%; } p { border: 1px solid blue; }​ 

Answer 2

You can use this: -

  div { width:20%; display:inline-table; } p { border: 1px solid blue; } 

It will fully work according to image size .....

see demo: - http://jsfiddle.net/WM6hK/11/

Answer 3

No, this is not possible just using CSS. You will need to set the width of the parent div and resize your images.

Answer 4

I recommend adding a bit of jquery .. to make your life a lot easier:

 imgw = $("img").width(); $("div").css("width", imgw); 

Here's what it would look like: http://jsfiddle.net/WM6hK/2/

Thus, you can add this simple line of code to any div and simply replace $ ("div") with an ID ID ("# idofdiv"). Hope this helps!

Answer 5

Its currently not possible using CSS

Using jQuery is as simple as this

 $("div").width($("div img").width()); 

Demo