HTML / CSS <p> image width

Question

I am working on a site that places an image in a div, and below the image is a <p> with some text in it. Images can be 150 pixels wide or 200 pixels wide, but the <p> tag should not be wider than the image, because then it will ruin the layout. So I'm not sure what to do, the width of the images is dynamic, so I can’t put the width anywhere, so I may have to resort to javascript to get the width of the image and put that width in <p> , but javascript is actually not my strong suit, so I hope for a simple css solution.

Here is some code so you guys can see how it looks.

 <li> <div class="container_movie"> <img src="images/category/movie/super-8-cover.jpg"/> <p> super8<br/> 22-07-'11 <span class="day_countdown">// 11 days</span></p> </div> </li> 

I also know that the code is not perfect yet, I am still testing a lot.

Answer 1

If you decide to use javascript, you can use something like this (the code is very ugly, and this only means to illustrate the idea):

 <script> function onImgLoad (img) { img.parentNode.lastChild.style.width = img.width + 'px'; } </script> <div class="container_movie"> <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQZLVgU_LoiQ7VDF6UQSqUWTN-ZqL2FWnBThQgL6F0G5803L-nR" onLoad="onImgLoad(this)"/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices vulputate pretium. In sagittis faucibus justo, ac dignissim erat feugiat eu. </p></div> 

Answer 2

I am afraid that you will not be able to escape using client-side scripts.

The easiest way is to set the width of the <div> container when loading the image. To do this, first add the identifier to the container:

 <div id="container_movie" class="container_movie"> 

Then this is a simple onload for the image:

 <img src="...source here..." onload="document.getElementById('container_movie').style.width = this.width + 'px'" /> 

Live test case: http://jsfiddle.net/jqy48/1/

Answer 3

Float div.container_movie . This will remove the width from the div and make it as wide as its contents. The image is likely to be wider than the text, so the width of the div will become equal to the width of the image. A paragraph is a block level element, so it will expand to the width of its container.

• Demo 1 - Images floated to the left
• Demo 2 - each image in a separate line

Answer 4

you can make 100% width

 <li> <div class="container_movie"> <img src="images/category/movie/super-8-cover.jpg"/> <p style="width:100%;"> super8<br/> 22-07-'11 <span class="day_countdown">// 11 days</span></p> </div> </li> 

Answer 5

set the <p> to 100%, which is the height of the parent element. Optionally set overflow hidden for parent to ensure security

Answer 6

Have you tried to set a paragraph element from the default block for an inline object?

 p.yourClass{ display:inline-block; width:100%; } 

Answer 7

You can try playing with this. http://jsfiddle.net/FzZy6

 .container_movie { float: left; position: relative; margin: 10px; } .container_movie p { position: absolute; } 

HTML:

 <div class="container_movie"> <img src="image.jpg" /> <p>Lorem ipsum</p> </div> 

Please note that this, as now, should be unsuccessful in older versions of IE. I think even ie7.