View Single Post
Old 05-02-2014, 12:06 PM   #3
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 474
Karma: 318996
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
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:

Code:
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:

Code:
  <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:

Click image for larger version

Name:	Image1.png
Views:	53
Size:	138.8 KB
ID:	122457

Below you can check the respective .epub

Regards
Rubén
Attached Files
File Type: epub L-Shape.epub (3.1 KB, 30 views)

Last edited by RbnJrg; 05-02-2014 at 12:25 PM.
RbnJrg is offline   Reply With Quote