I know that this is not really the right place to post an inquiry like this, but I have not been able to find any answers on the xhtml geek sites. As an additional page for a range of books, I am trying to create a list of books, each one with a cover thumbnail and a very short synopsis. It is in xhtml, and the problem is that different eBook Readers use different file formats, and different xhtml parsers, as well, so there is little conformity.
Let’s say the thumbnail image is left-aligned, and both the image and the synopsis text is contained in a <div>... but the text is not quite long enough to extend to the bottom of the image...
A. On the Kindle, which uses an adulterated MOBI format that does not support the css ‘float’ command, the result is that the text starts at the bottom right of the image, causing an ugly white-space to the right of the thumbnail, and essentially appears mostly underneath the image. The next <div>, with its next thumbnail and accompanying text, lines up below that, etc.
B. On a Reader using the ePub format, which DOES support the css ‘float’ command, the result is that the text, not quite long enough to extend to the bottom of the image, causes the <div> to end part-way down the image. The next <div> with the next thumbnail appears, overlapping the first one to the right, and the text is squashed into a reduced area to the right of that. The third thumbnail will appear overlapping the second one, etc.
In the bad old days of plain-vanilla html, you would just add a <br clear=all> after the synopsis text, and the new <div>, with its new thumbnail and text, would line up below the first one. That is absolutely
verboten these days! The logical answer is to add a style=”clear: both;” command to the <div> but that does not achieve what the old html tag did, because css “clear” offers control of left, right, or both... but no height control at all.
Has anyone found an answer to this problem?
