[RbnJrg]

Hi Doitsu;

Sometime ago I had posted a solution based in two boxes; I have adapted that solution to your present request.

1. In your .css stylesheet write the following:

p {
  text-align: justify;
  margin: 0;
  }

.Box1 {
  float: left;
  width: 210px; /* 200px + 10px for right margin */
  height: 100px;
}

.Box2 {
  clear: left;
  float: left;
  width: 90px; /* 80px + 10px for right margin */
  height: 200px;
}

As you can see, the height of the two boxes adds 300px (the height of your image). The width of the first box is the width of the wide part of your image plus a right margin (in this case I use 10px but of course, you can use what you like). The width of the second box is the width of the thin part of your image plus the right margin.

In the .xhtml file you should write:

  <p>Lorem ipsum dolor sit amet, conectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Sed at velit nisl.</p>

  <div class="Box1"><img src="../Images/UpsideL.png" alt="" /></div>

  <div class="Box2"></div>

  <p>Lorem ipsum dolor sit amet, conectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Sed at velit nisl.</p>

That's all In ADE works nice; here you can see a screenshot:



Below you can check the respective .epub

Regards
Rubén