<p> problem with wrapping images around text

[Shears]

I have some paragraphs of text, each paragraph enclosed with <p></p>. I want the text of one of the paragraphs to wrap around an image. But unless, for that particular paragraph, I change the <p></p> to <div></div> some crappy space appears - see attachment - at the top of the image (and only for the first image if I were to have two images [, and if I remove the left image the gap appears on the right. So it seems to happen for the top image only. ). This is a bit crap: paragraphs aren't meant to be enclosed in divs surely!

The html is only:

<p>
text
<div style="float: left;"><img src="http://localhost/red_square.png" /></div>
more text
<div style="float: right;"><img src="http://localhost/red_square.png" /></div>
more text
</p>

[tracknut]

Did you try it without the divs around the images? I would think that should do the trick.

Dave

[opifex]

Point #1 --- You cannot put a <div> inside a <p>... only inline elements are allowed inside <p> tags.
Point #2 --- Float the images and clear the floats.
Point #3 --- Add padding to separate the text from the image
Point #4 --- Use "alt" tags


<p>
text
<img src="src="http://localhost/red_square.png"" alt="alt text" style="float:left; clear:both; width:40px; padding:4px 4px 4px 0;" />
more text
<img src="src="http://localhost/red_square.png"" alt="alt text" style="float:right; clear:both; width:40px; padding:4px 0 4px 4px;" />
more text
</p>


Play with positioning if you want something fancier.

[Shears]

Hello,

Thanks for your replies. It - of course - works! :)

The reason for the <div> was that I was attempting to create a caption below each image with something like...
<div style="float: left;"><img src="http://localhost/red_square.png" /><div>The caption</div></div> but got the first image / random space problem so tried to strip it down to its bare essentials.

But since I can't use <div> inside <p> I need to come up with something new. I guess the caption could be held inside a <span>, but critically how to I define the position for the caption to be just below the image?? Span the image? I don't think it's meant for that lol.

[opifex]

<span> is a very useful and versatile element!
try this.... with enough text to see the results.

<p style="width:600px; text-align:justify; clear:both;">
<span style="float:left; clear:both; width:90px; padding:5px; margin:10px 10px 5px 0; border:1px solid black;" > <img src="http://localhost/red_square.png" alt="alt text" style="width:100%; padding:4px 4px 4px 0;" />Caption 1</span>
<span style="float:right; clear:right; width:90px; padding:5px; margin:10px 0 5px 10px;; border:1px solid black;" > <img src="http://localhost/red_square.png" alt="alt text" style="width:100%; padding:4px 4px 4px 0;" />Caption 2</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non mi quis nibh euismod pretium. Vivamus aliquam mi sed risus sollicitudin auctor. Nulla facilisi. Vestibulum vehicula rhoncus libero sed tristique. Maecenas ac magna ipsum, ac dapibus neque. Nunc iaculis imperdiet ipsum in suscipit. Integer cursus, neque in pretium interdum, massa nunc convallis velit, at congue enim urna in justo. Donec cursus pretium vestibulum. Donec auctor felis eget tellus condimentum vel tristique ipsum tristique. Quisque auctor neque ac sem fringilla fringilla. Sed et lacus eu magna euismod imperdiet. Maecenas ac magna ipsum, ac dapibus neque. Nunc iaculis imperdiet ipsum in suscipit. Integer cursus, neque in pretium interdum, massa nunc convallis velit, at congue enim urna in justo.Donec cursus pretium vestibulum. Donec auctor felis eget tellus condimentum vel tristique ipsum tristique. Quisque auctor neque ac sem fringilla fringilla. Sed et lacus eu magna euismod imperdiet.
</p>


Again, PLAY with the floats, clears, margins, padding and widths to see how it works and to get the layout you need.
Enjoy!

[Shears]

Hmm. That is not just right but it is perfect! :cool:

What is the purpose of the "clears" inside the spans? Removing them doesn't appear to make any difference. Or is it some kind of best practise thing? On another point, according to the WC3 on clears (http://www.w3.org/TR/CSS2/visuren.html#propdef-clear), which I might be misinterpreting, clears only go in block level elements...

Again, thanks for your help. :)

[opifex]

The "clear" will clear the float as applied to the sibling elements in the html... here the 2 <span> elements are siblings inside the parent <p> container.
There is a difference between the way IE and the rest of the browsers handle floats and clears. The best way to see everything is to play with the floats and clears one at a time and check IE and another browser.