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