Skip to main content
Techi_Panda
Techi_Panda
Inspiring
November 15, 2013
Question

Text cut off in multicolumn across multiple pages

  • November 15, 2013
  • 1 reply
  • 5115 views

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

<div class="box-1">

<div class="box1-content">

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

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

<div class="mcol">

<p class="TX1-BOX">On the Ins...</p>

</div>

</div>

</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

    This topic has been closed for replies.

    1 reply

    S
    sjpt
    Inspiring
    November 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?

    Techi_Panda
    Techi_PandaAuthor
    Inspiring
    November 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

    S
    sjpt
    Inspiring
    November 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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices