[Doitsu]

I had a look at Zelda Pinwheel's excellent ePub edition of "Three Men in a Boat" and noticed that she managed to wrap text around an upside-down L shaped image (without splitting the image into two parts and without spacers) using only two divs (boat006_ch03.xhtml; pg040.gif).
Unfortunately, Zelda doesn't seem to visit MR anymore.

The HTML code is:

<div class="leftpic" id="ocean"><img alt="" src="../Images/pg040.gif" /></div>
    <div class="leftpic"></div>

The CSS code is:

  div.leftpic {
  float: left;
  clear: left;
  text-align: left;
  margin: 0 0.5em 0.5em 0; 
}
  div.leftpic img {
  width: 100%;
  display:block;
}

div#ocean {
  width: 206px;     
  height: 109px;
}
	
div#ocean + div.leftpic {
  width:143px;
  height: 282px;
  margin-top: -0.5em;
}

(The image dimensions are 206x397px.)

Can someone please explain to me how Zelda Pinwheel arrived at the numbers for the divs and how one could recycle the code for upside down and regular L shaped images?

Alternatively, what ADE compatible CSS would you use to wrap text around my similarly shaped test image? (The text should be displayed right of the black parts of the image and on top of white parts of the image.)

The image dimensions are 200x300px; the dimensions of the white box in it are 120x200px (80px from the left, 100px from the top).