[HeartWare]

Originally Posted by RbnJrg

First Method:

a) In your .xhtml file:

    <p><img class="fl" alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>

b) In your .css file:

img.fl {
    float: left;
    with: 100%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

Where do I specify the occupied width of the image (the 25%/33%/40%/50% etc)?

Originally Posted by RbnJrg

Second Method:

a) In your .xhtml file:

    <div class="image50L>
         <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>

b) In your .css file:

.image50L {
    float: left;
    width: 50%;
}

.image50L img {
    with: 100%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

This one gives me the "larger than viewport" image and the "text within image" in Sigil.

Originally Posted by RbnJrg

Third Method:

a) In your .xhtml file:

    <div class="image50L>
         <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>

        <p>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>
    </div>

b) In your .css file:

.image50L {
    width: 100%;
}

.image50L img {
    float: left;
    with: 50%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

This one also gives me the "larger than viewport" image but the text now flows below the image.