Using float in ADR v1 and v2

bobcdy · 01-30-2015, 01:12 PM

I recently tried using 'float' for a small image in ADR and found that neither v1 or v2 worked properly. My epub coding was:

.figright {float: right;
width: 60%;
clear: both;
margin: 0;}

.figleft {float: left;
width: 60%;
clear: both;
margin: 0;}

. . .was considering whether or not to<span class="figright"><img alt="" src="../Images/fig2b.png" width="100%"/></span> thus. . .

Have I done something incorrectly or is the problem with ADR? It works perfectly with Sigil.

eschwartz · 01-30-2015, 02:39 PM

Sigil uses a web renderer (webkit), it supports a lot of stuff that a lot of other things don't.

DaleDe · 01-30-2015, 05:10 PM

ADE supports float but I am not sure that it will figure it out from the span. I would try putting the class in the image itself.

Dale

bobcdy · 01-30-2015, 10:17 PM

Thanks DaleDe and Eschwartz,

The correct version with DaleDe's help should be:
. . .was considering whether or not to<span class="figright"><img alt="" class="float" src="../Images/fig2b.png" width="100%"/></span> thus. . .

Works perfectly with ADR

JSWolf · 01-30-2015, 11:21 PM

BTW, ADR should be ADE.

AlexBell · 01-31-2015, 03:36 AM

I'm not really sure what you are asking, and apologise if I've misunderstood your post and the replies. The following CSS and HTML will put an image to the right of the 'page', and text following will float around the image.

div.illustration {
margin: 0 0 0 5px; padding: 0;
/* border: 1px solid black; */
width: 50%;
float: right;
}
div.illustration img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
}
div.illustration p {
margin: 0; padding: 0;
text-align: center;
text-indent: 0;
font-size: smaller;
} /* With thanks to Elizabeth Castro */

<div class="illustration">
<img src="images/Author.png" alt="Wilkie Collins"/>
</div>

<p>text goes here</p>

It is taken from Elizabeth Castro's excellent book EPUB straight to the Point

01-30-2015, 01:12 PM	#1
bobcdy Fanatic Posts: 527 Karma: 1048576 Join Date: May 2009 Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet	Using float in ADR v1 and v2 I recently tried using 'float' for a small image in ADR and found that neither v1 or v2 worked properly. My epub coding was: .figright {float: right; width: 60%; clear: both; margin: 0;} .figleft {float: left; width: 60%; clear: both; margin: 0;} . . .was considering whether or not to<span class="figright"><img alt="" src="../Images/fig2b.png" width="100%"/></span> thus. . . Have I done something incorrectly or is the problem with ADR? It works perfectly with Sigil.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Vertical float on a page	triggletomagneto	Conversion	2	12-17-2014 10:22 PM
Float Question (ADE)	Tex2002ans	ePub	19	08-02-2013 11:34 PM
The operator >> is undefined for the argument type(s) float, float	twobob	Kindle Developer's Corner	10	09-05-2012 01:50 PM
Float bug in ADE ?	helenouchkaia	ePub	16	01-08-2012 12:11 PM
float not working as expected in ADE	iain robinson	ePub	8	06-18-2011 05:16 AM

01-30-2015, 02:39 PM	#2
eschwartz Ex-Helpdesk Junkie Posts: 19,421 Karma: 85400180 Join Date: Nov 2012 Location: The Beaten Path, USA, Roundworld, This Side of Infinity Device: Kindle Touch fw5.3.7 (Wifi only)	Sigil uses a web renderer (webkit), it supports a lot of stuff that a lot of other things don't.

01-30-2015, 05:10 PM	#3
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	ADE supports float but I am not sure that it will figure it out from the span. I would try putting the class in the image itself. Dale

01-30-2015, 10:17 PM	#4
bobcdy Fanatic Posts: 527 Karma: 1048576 Join Date: May 2009 Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet	Thanks DaleDe and Eschwartz, The correct version with DaleDe's help should be: . . .was considering whether or not to<span class="figright"><img alt="" class="float" src="../Images/fig2b.png" width="100%"/></span> thus. . . Works perfectly with ADR

01-30-2015, 11:21 PM	#5
JSWolf Resident Curmudgeon Posts: 80,782 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	BTW, ADR should be ADE.

01-31-2015, 03:36 AM	#6
AlexBell Wizard Posts: 3,413 Karma: 13369310 Join Date: May 2008 Location: Launceston, Tasmania Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet	I'm not really sure what you are asking, and apologise if I've misunderstood your post and the replies. The following CSS and HTML will put an image to the right of the 'page', and text following will float around the image. div.illustration { margin: 0 0 0 5px; padding: 0; /* border: 1px solid black; / width: 50%; float: right; } div.illustration img { border: 0; margin: 0; padding: 0; width: 100%; display: inline; } div.illustration p { margin: 0; padding: 0; text-align: center; text-indent: 0; font-size: smaller; } / With thanks to Elizabeth Castro / <div class="illustration"> <img src="images/Author.png" alt="Wilkie Collins"/> </div> <p>text goes here</p> It is taken from Elizabeth Castro's excellent book EPUB straight to the Point*

Advert

Advert