Text cut off in multicolumn across multiple pages

Report · Nov 15, 2013

Hi Experts

I am creating an epub with some color boxes with two columns. I have a problem with text spreading multiple pages which is cut off top and bottom of the box. See the screenshot below. Anyone faced these kind of problem before?

Page 1

Page 2

Below is the code for my epub.

HTML

<p class="border-text">title</p>

<p class="box1-head">Title Title Title Title Title Title Title Title Title </p>

</div>

CSS:

div.box-1

{

background-color:#ECF3D8;

border-left:30px solid #97C000;

padding:10px;

margin-top:24px;

margin-bottom:24px;

margin-right:18px;

page-break-before:always;

}

div.box1-content

{

margin-left:3%;

padding:50px 75px;

}

p.box1-head

{

font-family: "Arial";

font-size: 32px;

color:#D60083;

margin-top:0px;

}

p.TX1-BOX

{

font-family:"Arial";

font-size: 12px;

margin-top:0px;

margin-bottom:16px;

}

Kindly suggest, Thanks in advance

Regards

Panda

Report · Nov 15, 2013

Looks as if the flow is completely wrong, as it goes to page 1 col 1 before page 1 col 2.

You must have made it somehow so the entire document was created in a very long two column box, and the box then sliced up into pages.

I'm not sure how to use html/css for ebook pagination, so I am afraid I can't suggest the correct solution.

Is all the CSS there, I can't see anything for two column?

Report · Nov 15, 2013

Hi Sjpt

sorry i missed the CSS for two column

div.mcol

{

-moz-column-count:2; /* Firefox */

-webkit-column-count:2; /* Safari and Chrome */

column-count:2;

-moz-column-gap:20px; /* Firefox */

-webkit-column-gap:20px; /* Safari and Chrome */

column-gap:20px;

}

Yes my two column box spreads over 5 pages, all the other content are single column only this box elemets gives problem to me any suggestion

Thank you for your reply

Report · Nov 15, 2013

I just did an update which the forum threw away ...

Looks as if you need an @-epubx-partition rule to define properly flowing two column,

probably (but ???) to replace div.box-1

http://www.idpf.org/epub/pgt/#s3

General opinion on the web seems that it is best to avoid 2 column as most ereaders have pretty small screens.

May not apply if you know you have just one target mahine with a largish screen.