steven wrote:
I can float the image left or right so the text will float around
it, but only if the top of the image is aligned with the start of
the paragraph. I'd like the image be a little below that, so the
text appears above, left and below the image. The text is a single
paragraph.
My solution is to place the image in a <span> that is inserted within
the paragraph text a few lines below the start of the text. Try this CSS:
..imgleft, .imgright {
font-size: 90%;
font-style: italic;
padding: 1em;
text-align: center;
}
..imgleft {
float: left;
}
..imgright {
float: right;
}
<p>
Here is a bunch of text ...
Here is a bunch of text ...
Here is a bunch of text ...
<span class="imgright">
<img ...> <br>A caption here
</span>
Here is a bunch of text ...
Here is a bunch of text ...
Here is a bunch of text ...
</p>
See an example at my site:
http://www.freezeblock.com/
...the picture of the house. Since the page works for any browser
width, the amount of text above will vary with that width. Place the
<span> where you think it works best.
--
-bts
-This space intentionally left blank.