For what it is worth this is what I do to float an illustration to the right and have text flow around it, and give that illustration a caption. As you can see from the comment I got the markup from Elizabeth Castro, in her excellent EPUB Straight to the Point book,
<div class="illustration">
<img src="images/Author.png"
alt="alt text"/>
<p>caption</p>
</div>
div.illustration {
margin: 0 0 0 0.5em; padding: 0;
border: 1px solid black;
width: 50%;
float: right;
}
div.illustration img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
}
div.illustration p {
margin: 0; padding: 0;
text-align: center;
text-indent: 0;
font-size: smaller;
} /* With thanks to Elizabeth Castro */
div.illustration+p {text-indent: 0;} /* No indent for 1st para after an illustration */
If you want to see the markup in action you could go to any of my ebooks on the MR library - the shortest is The War Prayer by Mark Twain, and the longest is probably The Woman in White by Wilkie Collins
|