[GrannyGrump]

@ GMcG, many thanks for the feedback. I remember trying something similar a long time ago when I first started, and had the same white-space problem between the two pieces. Now, on your example, I tried putting a negative bottom margin on the "top" class, and got rid of the whitespace. Yay! (I don't know if it would give similar results across a range of readers, but this is an alternative if I can't use png with alpha transparency to force the float/text-wrap.)

.top {
    height: auto;
    margin-bottom:-5px;
    width: 100%
    }

@ dgatwood --

The max-width: 100% CSS property is probably what you want, causing the image to scale to the entire width of the image.

Do you mean scale the image to the entire width of the DIV? If so, THANK YOU, I think this might work.

Anyway, it works in the Sigil preview and in ADE, with this change to the primary DIV class, and to the IMG. (I made the DIV narrower this time so I could see results on ADE on a standard monitor, and so that the image wouldn't blow up so huge.)

div.ellshapeLeft,
div.ellshapeRight { 
	border: 0; padding: 0;
	margin: 0 0 .75em 20%;
	width: 60%;
	text-indent: 0;
	text-align: center;
}
div.ellshapeRight img,
div.ellshapeLeft img {
  text-indent: 0;
  width: 100%;
/*  max-width: 750px;*/
max-width: 100%;
}

I didn't have to mess around with negative bottom margin at all for this one (I tried that once, and had a heckuva time -- pixels weren't right when the image was scaled very much at all, ems weren't right if the font-size got too wacky, then I gave up.) But of course, I haven't tested on my Sony yet, and don't know what other readers would do.