[zelda_pinwheel]

here's an image i wrapped with 3 divs, just to see if it could be done. it turns out, it can. and no need to stop at 3 ; this method should work with as many parts as you feel like making.

you need to add a third div, and give it an id. from there, the method is the same as previously. i used a negative margin on the first div (containing the image) because the narrowest part of the image was at the top again.

html code :

<p>
<div id="girl" class="leftpic"><img src="images/pg140.gif" alt="girl pinning up her frock" /></div>
<div id="girl2" class="leftpic"></div>
<div class="leftpic"></div>

Of all experiences in connection with
towing, the most exciting is being towed by girls. (...)
</p>

css code :

  div.leftpic {
  float: left;
  clear: left;
  text-align: left;
  margin: 0 0.5em 0.5em 0; 
  border: solid green 1px;/**/ 
}
  div.leftpic img {
  width: 100%;
}
/* GIRL IMG
/* Girl Image size: 169 x 346 
/* these measurements are approximative :
/* Width of top part: 85px
/* Height of top part: 48px
/* Width of middle part: 130px
/* Height of middle part: 56px
/* Width of bottom part: 169px
/* Height of bottom part: 250px */

div#girl {
  max-width: 169px;
  width: 16em;        
  max-height: 1.5em;
  margin-right: -5em;
 border: solid red 1px; /**/ 
}
div#girl2 {
 max-width: 130px;
  width: 7.5em; 
  height: 4em; 
  margin-top: -0.5em;
}
div#girl + div#girl2 + div.leftpic{
  width: 10.5em; 
  height: 15.5em; 
  margin-top: -0.5em;
}