[At_Libitum]

Here's another thing that isn't supposed to happen

It seems you've looked too closely at Stanza and inadvertently inherited an issue it has with images in div's

I was over in the ePub forum and stumbled on to a topic about CSS Tips and tricks (it's pinned)

There was a tip about flowing text around an irregular image and as it so happened I have a candidate for that.

So I took the example and tried it out on the copy I had myself where the text was still flowing around the image rectangular.

In the browsers I could try (Firefox, Safari, IE) this worked as advertised in FF and S, except of course in IE.
So with that success and knowing most e-Readers using webkit for epubs, I modified the book and tried it out.
I'm not going to let you hunt through the book but will include needed css and html

Consider the following HTML

<p>
<div class="left1">
<img class="img1" src="images/alice23a.gif" alt="Alice talks to Cheshire Cat" />
</div>
<div class="left2" style="">
<img class="img2" src="images/alice23a_mask.gif" alt="Alice talks to Cheshire Cat" />
</div>
So she set the little creature down, and felt quite relieved to
see it trot away quietly into the wood.  “If it had grown up,”
she said to herself, “it would have made a dreadfully ugly child:
but it makes rather a handsome pig, I think.”  And she began
thinking over other children she knew, who might do very well as
pigs, and was just saying to herself, “if one only knew the right
way to change them—” when she was a little startled by seeing
the Cheshire Cat sitting on a bough of a tree a few yards off.
</p>
<p>
  The Cat only grinned when it saw Alice.  It looked good-
natured, she thought:  still it had Very long claws and a great
many teeth, so she felt that it ought to be treated with respect.
</p>

and the following CSS

.left1 {
	float:left;
	max-width:160px;
	width:23.35% !important;
	text-align:left;
	margin-bottom:-12px;
	border:1px solid red;
}
.left2 {
	float:left;
	max-width:175px;
	width:26.65% !important;
	max-height:210px;
}
.img1 {
	display:block;
	max-width:342px;
	width:210% !important;
}
.img2 {
	display:block;
	max-width:182px;
	width:100%  !important;
	margin-bottom:-5px;
	border:1px solid red;
}

This is how it looks in Safari, the red border is so you can see the divs.


And this is what Marvin makes of it.


As you can see it ignores the specified width for the image and forces it to fit inside div.left1 instead of letting it overflow outside of the box into div.left2.

And if you wonder why I changed the example from that topic by using percentages and adding a transparant mask image, that is because I feel images should scale with page size, not with text size.

Attached also the images used in the example