I have an image I would love to float right, and I can get this done using CSS.
img.right {float: right; margin: 4px;}
My problem is I have several paragraphs right after each other. I would like the image to span multiple paragraphs, and not have a field of empty space between the paragraphs waiting for the image to end.Can you explain a little better, please, perhaps with an illustration? What you said is exactly right; floating an object will position it somewhere and the content in the same block-level element will wrap around it.I'm assuming two things:
1) You are previewing your page in Internet Explorer
2) The <img> tag is inside the <p> tag, as in:
<p><img ... class="right">
This is where the text begins
</p>
<p>This is another paragraph.</p>
Internet Explorer will expand a block element to encompass any floated elements within. In your case, the paragraph tag is the block element, and the image is the floated element. Internet Explorer running on Windows will expand the paragraph down so that it envelopes the floated image. This isn't according to W3C spec, but it's reality.
Mozilla, Firefox, Opera, IE5-Mac, and Safari will float the image across multiple paragraphs like you want. IE-Win won't. The fix is easy:
<img ... class="right">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
The best advice you'll ever get for trouble-shooting CSS "problems" is to preview your pages in Mozilla, Firefox, or Opera 7+ first. Then view it and hack the style sheets to get things to work in IE-Win. A couple sites to get you started:
Install Multiple versions of IE-Win (<!-- m --><a class="postlink" href="http://www.skyzyx.com/archives/000094.php">http://www.skyzyx.com/archives/000094.php</a><!-- m -->)
A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->)
W3 Schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->)
Position Is Everything (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->)
EDIT: Also be sure that the clear property isn't applied to the paragraph tags in question.
img.right {float: right; margin: 4px;}
My problem is I have several paragraphs right after each other. I would like the image to span multiple paragraphs, and not have a field of empty space between the paragraphs waiting for the image to end.Can you explain a little better, please, perhaps with an illustration? What you said is exactly right; floating an object will position it somewhere and the content in the same block-level element will wrap around it.I'm assuming two things:
1) You are previewing your page in Internet Explorer
2) The <img> tag is inside the <p> tag, as in:
<p><img ... class="right">
This is where the text begins
</p>
<p>This is another paragraph.</p>
Internet Explorer will expand a block element to encompass any floated elements within. In your case, the paragraph tag is the block element, and the image is the floated element. Internet Explorer running on Windows will expand the paragraph down so that it envelopes the floated image. This isn't according to W3C spec, but it's reality.
Mozilla, Firefox, Opera, IE5-Mac, and Safari will float the image across multiple paragraphs like you want. IE-Win won't. The fix is easy:
<img ... class="right">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
The best advice you'll ever get for trouble-shooting CSS "problems" is to preview your pages in Mozilla, Firefox, or Opera 7+ first. Then view it and hack the style sheets to get things to work in IE-Win. A couple sites to get you started:
Install Multiple versions of IE-Win (<!-- m --><a class="postlink" href="http://www.skyzyx.com/archives/000094.php">http://www.skyzyx.com/archives/000094.php</a><!-- m -->)
A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->)
W3 Schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->)
Position Is Everything (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->)
EDIT: Also be sure that the clear property isn't applied to the paragraph tags in question.