Box divided between two pages

[Arkadian]

I have defined a text box like this:

<style> 
div.box1 {
  width: 20em;  
    background-color:#D1D3D4;
	border-bottom: 3px double;
	border-top: 3px double;
	border-left: 3px double;
	border-right: 3px double;
	padding: 1em;
  margin-top: 1em;
	line-height: 1.7em;
	text-align: center;
    float: right;
}
</style>


  <div class="box1">Yadda, yadda, yadda, yadda, yadda, yadda.</div>
  <div style="clear:both;"></div>

which works fine and looks pretty. Is there a way to stop the box from being divided between two pages if it happens to be at the end of a page?

In the editor it always looks fine, but then when I look at the book on my iPad using iBooks, that's when I see the problem.

[Toxaris]

You could add 'page-break-inside: avoid' to the div class. No guarantee though, it is not supported on all devices. It probably is in iBooks.

[Arkadian]

thanks... will give that a shot

[Arkadian]

OK, sorry for the daft question (and yes, I know I should be ashamed of myself...), how do I actually add that string to the "div class"?

[Toxaris]

Err, in the stylesheet of course. You already gave a style definition for the div (box1). Just add it to it.

[Arkadian]

This is what (I think) I have done...
I have now this:

<div class="box1" page-break-inside: avoid>

but then when I open the book I get this:

“This page contains the following errors:
error on line 44 at column 36: Specification mandate value for attribute avoid
Below is a rendering of the page up to the first error.”

[theducks]

Originally Posted by Arkadian

This is what (I think) I have done...
I have now this:

<div class="box1" page-break-inside: avoid>

but then when I open the book I get this:

Put that IN the stylesheets .box1 , not the div tag

[Arkadian]

Erm... it is not in the stylesheet... It is all in there, in the file itself.

(Please, no swearing at the screen ... )

[mrmikel]

between the style tags at the top of document.

[theducks]

Originally Posted by mrmikel

between the style tags at the top of document.

That is still a form stylesheet, just not separate

[Toxaris]

Don't take this wrong, but perhaps a crash course HTML/CSS would be a good idea for the general ideas...

To spell it out:

<style> 
div.box1 {
  width: 20em;  
    background-color:#D1D3D4;
	border-bottom: 3px double;
	border-top: 3px double;
	border-left: 3px double;
	border-right: 3px double;
	padding: 1em;
  margin-top: 1em;
	line-height: 1.7em;
	text-align: center;
    float: right;
    page-break-inside: avoid;
}
</style>


  <div class="box1">Yadda, yadda, yadda, yadda, yadda, yadda.</div>
  <div style="clear:both;"></div>

[Arkadian]

Ok, assuming there was a need to stress it further, I am a TOTAL dope The box thing now seems to be working fine and thanks to all that have put up with me.
I have tried one chapter only, but I am hopeful now

[theducks]

Originally Posted by Arkadian

Ok, assuming there was a need to stress it further, I am a TOTAL dope The box thing now seems to be working fine and thanks to all that have put up with me.
I have tried one chapter only, but I am hopeful now

A classic case of why to use a separate Stylesheet (used for all chapters)

fix it once in the sheet, check for exceptions , Done

[Arkadian]

Indeed so...

[mrmikel]

Not hard to do either. Copy all the stuff between the style tags. Paste it into notepad or something similar and save it as yourchoiceoffilename.css.

Then use calibre or sigil to open the document. Eliminate the same stuff, including the style tags this time in each section. Then import your new css file and the last step is linking each file to this spreadsheet. It is easy to do this all at once by selecting all the sections.

You can also export a stylesheet and save it then you can use it over again. When you alter it with new stuff, save it again so you can use all your new updates in your next project.

You might not want to link the very first file in your epub to this overall stylesheet. It is often a titlepage where you might want each line to be spaced much wider from its predecessor. You can save this special stylesheet separate and reuse it in your following ones. That way once you have solved a problem, you can bring your solution very easily into your latest effort.

In any case, when you used a linked stylesheet, a change in this main stylesheet corrects all, so all captions look the same, all pictures are handled the same etc, as the ducks noted.