[eggheadbooks1]

Okay. We're almost there. I have lowered the margin value of the Float-L division from 15px to 10px and that has gotten rid of the large gap between image and text. The em value is now recognized by ADE (and I also tested in Aldiko, which I have side-loaded on my Fire). Only one small obstacle remains: distortion of the image ratio. I added width=auto into the CSS, and while that works at most image sizes, there is some distortion remaining. Perhaps I suck that one up. But is there a better code than "width=auto".

So now it looks like this and it is working, save for the above notations:

div.FrameSmall{
	width:100%;
	clear:left;
}
div.Float-L{
	float:left;
	margin: 0 10px;
	}
.imageEM{
	height:6em;
	width:auto;
	max-width:225px;
	min-width:110px;
}

and

<div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.png" class="imageEM" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>