Hi dresden_phoenix,

Your code below really helped me and enabled me to do what I needed to do. Thank you! However, it breaks up a bit in IE7 on Windows XP. The paragraph that comes after the first paragraph where the image and caption are contained does not follow immediately after the first paragraph and if the image is a lot taller than the first paragraph, the 2nd paragraph starts below where the image sits. Is there a way to add a fix just for IE7 on Win XP? I have added a screencap as a reference. Thank you in advance for any help.


Screen Shot 2013-08-29 at 3.10.08 PM.jpg

Quote Originally Posted by dresden_phoenix View Post
Welcome to Sitepoint.

You may want to try this code:
Code:
.imgNcap { float:left;
 padding:.25em ;
 border:1px solid #000; 
margin: 0 1em 1em 0; 
width:100px ; /* the width of your image ( you can put this code inline if your images vary in width*/
padding:10px}
.imgNcap  img {  display:block }/* this where the magic happens*/

and in the HTML

Code:
<p class="imgNcap"><img src="#" height=100 width=100 alt="" >your long  caption again</p>
I like this because it doesn't use extra tags... and inf it fits your content you can turn the P tag and insert it into any paragraph like this:

Code:
	<p>	<span class="imgNcap" ><img src="#" height=100 width=100 alt="" >your long caption again</span>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Hope that helps!