I need to position text under image. The image is floated to the left and the text nicely wraps around it. I need to preserve the effect while doing so. This is the code for the image and the text: <p><img src="_images/plah.jpg" width="211" height="300" alt="nyc"> By nature animals are born with the faculty of sensation, and from sensation memory is produced in some of them, though not in others. And therefore the former are more intelligent and apt at learning than those which cannot remember; those which are incapable of hearing sounds are intelligent though they cannot be taught, e.g. the bee, and any other race of animals that may be like it; and those which besides memory have this sense of hearing can be taught. </p> Code (markup): And these are the styles for the image and the text that wraps around it: img { float: left; margin: 0 1em 0 0; } p { font-size: 1em; line-height: 1.5; margin-bottom: 1em; } Code (markup):
First, what makes the image part of the paragraph? Second, do you want the float behavior or not? WHAT text do you want under it? the text wrapping around it? If so what do you mean by "preserve the effect"?!? Not sure what you're even asking there. Do you mean you have MORE text you need to add that goes under the image? Something like... <div class="leadingPlate"> <img src="_images/plah.jpg" width="211" height="300" alt="nyc" /> Your New Text </div> <p> By nature animals are born with the faculty of sensation, and from sensation memory is produced in some of them, though not in others. And therefore the former are more intelligent and apt at learning than those which cannot remember; those which are incapable of hearing sounds are intelligent though they cannot be taught, e.g. the bee, and any other race of animals that may be like it; and those which besides memory have this sense of hearing can be taught. </p> Code (markup): /* Assumes a reset is in use */ .leadingPlate { float:left; padding:0 1em 1em 0; /* padding instead of margin means no collapse headaches */ text-align:center; /* center that 'new text' part to the image */ } .leadingPlate img { display:block; /* prevents alignment oddities */ } Code (markup): Guessing a bit, not entirely certain that's what you're asking for.
Thank you, deathshadow. Your code certainly accomplishes the task. The only downside to your suggestion is that I will have to rewrite the code of the page, which won't be a difficult task anyway. I was just wondering if there is a way to preserve the original code and yet add some text below the picture (any text). Your suggestion is perhaps the easiest way to deal with the task. Maybe I was over-complicating matters. Edit: The text below the picture is a description of the picture.
@Hafiz Kashif Asif, he still wants the whole thing (image + new text) floating -- you missed what he's asking for.