Why does my ebook look like this

[TheHendrik]

Hello, I have been editing an ebook and most of it works in all my devices. However, one specific part is messed up when opened in kindle:

The parts in italic should be two column of verses, the first in norse and the second in english.

In Sigil, the part is like this:

<p>previous paragraph</p>
<div>
<div class="left column"
Line 1 <br />
Line 2 <br />
... <br />
</div>
<div class="right column">
Line 1 <br />
Line 2 <br />
... <br />
</div>
</div>
<p>netx paragraph</p>

Any idea what I'm doing wrong. Thank you.

[DiapDealer]

This not really the place to ask why an epub converted to a Kindlebook doesn't look like you expect it to look. Moving from Sigil to the Workshop forum.

[jhowell]

You will need to supply the associated CSS for anyone to be able to answer your question.

Also your Imgur link does not work properly.

[TheHendrik]

Couldn't edit the OP, here's the link to the image of how it appears on the kindle:


This is how it appears in the Sigil preview:


The relevant CSS:

.box_left {
float: left;
width: 50%;
text-align: justify;
font-style: italic;
min-height: 100%;
padding-right: 2%;
text-indent: 0em;
}

.box_right {
float: right;
width: 50%;
text-align: justify;
font-style: italic;
min-height: 100%;
padding-left: 2%;
text-indent: 0em;
}

Is there any obvious mistakes? I'm not very good at it yet, trying to learn.

[TheHendrik]

The images again didn't appear, I'll just post links:

How it appears in the kindle:
https://imgur.com/gallery/VtBULXy

How it appears in Sigil previews:
https://imgur.com/gallery/Ggk7xBg

[JSWolf]

How are you converting your ePub to work on your Kindle?

[TheHendrik]

Originally Posted by JSWolf

How are you converting your ePub to work on your Kindle?

Using Calibre to convert to .azw3.
Another section which is formatted the same way is display properly, it is this specific part that is displayed wrong.

[jhowell]

One problem is that padding is added to width so you are trying to make it display 104% wide. Another is that you need to clear the floats.

[JSWolf]

Originally Posted by TheHendrik

Using Calibre to convert to .azw3.
Another section which is formatted the same way is display properly, it is this specific part that is displayed wrong.

The problem is the code for that section is just poor. It needs to be rewritten correctly. And because of how poorly it's written, it doesn't display well enough in the code box.

[TheHendrik]

I tried getting rid of floats and it still doesn't work, I'm completely out of ideas, can someone show a place where this works so maybe I can learn how to do it?

[DNSB]

BTW, an Imgpur link is not an image. You could have used the add URL tool or right clicked on the image and copy/pasted the image link though my personal suggestion to use the attach file tool which allows the images to show as thumbnails that can be opened for the full size image.

[Karellen]

Probably easier to use a 2 column table.

[DNSB]

This is an example where I attached the two images from the first Imgpur link and the 1 image from the second link. I did have reduce the size of the Kindle image since it exceeded the 1.50MB limit.

[TheHendrik]

I guess a table is the only way for now, I'll use one until I manage to make it work properly.

[Hitch]

Originally Posted by TheHendrik

I guess a table is the only way for now, I'll use one until I manage to make it work properly.

Well, not to be Dora Doom, but folks, "box" is an unsupported CSS for KDP.

Multiple columns, side-by-side, other than inside a table (3 columns MAX) are not supported.

And submitter, be very very careful with how much of the book has that side-by-side language stuff--KDP expressly states that entire books like that are NOT allowed.

Hitch