How to wrap text around image for eBooks?

No Comments

To wrap text around image we need to apply float property to <img> tag element.

Here’s a sample code.

Step 1: Open your eBook in Sigil or similar software.

Step 2:Insert the following code in your CSS file:

CSS

.imgRight {

float: right;

padding: 5px;

width: 30%;

height: auto;

display: block;

}

.imgLeft {

float: left;

padding: 5px;

width: 30%;

height: auto;

display: block;

}

Step 3: Open the HTML page in which you want to wrap text around image. Apply CSS float property to <img> tag and set its value to “left” or “right” as per your requirement.

HTML
<li>Turn the casualty into the recovery position, if injuries permit. Give ongoing care.
<div style=”padding-top:20px;”>
<img alt=”ch2pg71(1)” class=”imgLeft” src=”../Images/ch2pg711.png”/>
<img alt=”ch2pg71(2)” class=”imgRight” src=”../Images/ch2pg712.png”/>

If injuries make it necessary for the casualty to be face up, monitor breathing continuously. If necessary, hold the airway open. Always ensure an open airway.Loosen tight clothing at the neck, chest and waist, and continue ongoing casualty care until hand over. Record any changes in level of consciousness and when they happen.

</div>
</li>

<div style=”clear:both;”/>

Step 4: Save your file. Notice the change in eBook pages. Image text will be wrap around as you set its float property.

Result:

Wrap Image with text- screen1

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

More from our blog

See all posts
No Comments

Recent Posts