CSS/HTML question

[JSWolf]

Originally Posted by jbacelar

This works fine in ADE
Attachment 89841

That does work in ADE just fine.

[mrmikel]

One thing I noted is that this only works if the first paragraph is not wider than a line. If it is larger than a line, the next paragraph skips down and starts on the second line. This makes it worse than if you just made the first a left paragraph and the second a right paragraph, by making it inconsistent. This is in laying out a series of quotes, with the author as a right align after the quote.

[santiagogato]

The code below is the css for doing what you want.

<div style="width:80%;margin:0px auto;text-align:center;"><h1 style="float:left;">This is on the left</h1><h1 style="float:right;">This is on the right</h1></div>
<div style="clear:left;">&nbsp;</div>
<p>As you can see about, it's done.</p>

[cybmole]

this is going to go pear shaped once it's put onto a small e-reader with user selected large font, as there simply will not be room on the line.

surely better to use 2 separate lines, for max e-reader compatibility

[Timur]

Another style that works with ADE is inline-block.

Example:

[ElMiko]

@cybmole - I haven't tested this on a device yet, but based on messing with margins in Sigil, i don't think it should be much of a problem. Indeed, if the screen is too small to accommodate the groups, it'll just end up doing naturally what your proposing: it'll split them into two line, one above the other.

@Timur - that's a really useful display property that I hadn't heard of before, and which, incidentally, looks like it would bypass the screen size problem while still maintaining two adjacent columns of text, so extra rockstar points for you!

[mmat1]

Originally Posted by ElMiko

@Timur - that's a really useful display property that I hadn't heard of before, and which, incidentally, looks like it would bypass the screen size problem while still maintaining two adjacent columns of text, so extra rockstar points for you!

I hadn't heard of this value before as well, the reason is it isn't listed here.

[Jellby]

Meaning that reading systems are not required to support it, and they still can call themselves ePub-compliant.

But we have reading systems that do not support "required" features, and they call themselves ePub-readers, so I don't think anyone cares much.

[Hitch]

Originally Posted by Jellby

Meaning that reading systems are not required to support it, and they still can call themselves ePub-compliant.

But we have reading systems that do not support "required" features, and they call themselves ePub-readers, so I don't think anyone cares much.

Oui, Jellby:

And the only thing I ever care about is: does it actually WORK? We long ago gave up trying to "please" all devices; it's simply not possible. But we go for the biggies--Amazon, Nook & iBooks, along with Kobo and Sony. After that, we can't manage; too many devices with too many weirdnesses (and don't get me started about reading apps, particularly on iPad and Droid tabs/phones!).

Hitch

[ElMiko]

so, it seems this is failing on ADE and on Sony readers.... any ideas as to why?

The first image is of the HTML code, the second is of the relevant css, the third is the BV result in Sigil (and, obviously, calibre), and the fourth is the result in ADE (which, as I've been told, is the same result rendered on Sony readers).

[mmat1]

Originally Posted by ElMiko

so, it seems this is failing on ADE and on Sony readers.... any ideas as to why?

The first image is of the HTML code, the second is of the relevant css, the third is the BV result in Sigil (and, obviously, calibre), and the fourth is the result in ADE (which, as I've been told, is the same result rendered on Sony readers).

Why <div clear both> ? What happens if you remove it ??

Whats class "heading3" ??? ("The style of the outher div"...)

[ElMiko]

Originally Posted by mmat1

Why <div clear both> ? What happens if you remove it ??

Whats class "heading3" ??? ("The style of the outher div"...)

The instructions say it need "div clear both". without it, it creates a drop cap effect around the left and right margins of the first paragraph.

http://css-tricks.com/left-align-and...the-same-line/

.heading3 {
	margin-bottom: 3em;
	margin-top: 0.5em;
	}

(not sure what the smiley-face graphics mean....)

[yekim54]

Originally Posted by ElMiko

so, it seems this is failing on ADE and on Sony readers.... any ideas as to why?

Try adding &nbsp; like this:

<div style="clear: both;">&nbsp;</div>

[ElMiko]

@ yekim54— well, that did the trick. do you (or anyone else) have any idea why? A "<br />" instead of an "&nbsp;" didn't work, so I'm curious....

[cybmole]

ADE / sony ignore empty lines i.e. those with just <br />