Answers.Body: <p>According to this <a href="http://www.pigsgourdsandwikis.com/2010/06/goodbye-widows-and-orphans-or-yes-you.html" rel="nofollow noreferrer">blog article</a>, you should use the <code>display: inline-block</code> property on  a <code>div</code> selector that encloses your header and paragraph.</p>
  
  <hr>
  
  <p>Here is an excerpt from the said article:</p>
  
  <blockquote>
    <p>If you set the <code>display</code> property for a <code>div</code> to be <code>inline-block</code>,
    iBooks will display the contents of the entire <code>div</code> together on a
    single page, skipping to a new page if necessary, unless the entire
    <code>div</code> can't fit on a page by itself, in which case it will be divided
    across pages.</p>
    
    <p>It's simple and very powerful: <code>div {display: inline-block}</code></p>
    
    <p>Here's a short document with no <code>inline-block</code> display. Notice how the
    header is separated from the paragraph that follows it, and even how a
    bit of the background bleeds through to the following page. Icks. The
    image and caption are likewise separated. Terrible!</p>
    
    <p><a href="https://i.sstatic.net/KuVqi.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KuVqi.jpg" alt="enter image description here"></a></p>
    
    <p><a href="https://i.sstatic.net/DlMgg.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/DlMgg.jpg" alt="enter image description here"></a></p>
    
    <p>Here's the exact same document with one <code>div</code> enclosing the header and
    paragraph and second <code>div</code> enclosing the image and caption. Both
    <code>div</code>s were set to <code>display:inline-block</code>. The result? Goodbye widows
    and orphans:</p>
    
    <p><a href="https://i.sstatic.net/jp41W.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jp41W.jpg" alt="enter image description here"></a></p>
    
    <p><a href="https://i.sstatic.net/i8shL.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/i8shL.jpg" alt="enter image description here"></a></p>
    
    <p>Where can you use this? As shown here, if you have a series of
    illustrations with captions, use <code>inline-block</code> to keep the caption
    right under the illustration.</p>
    
    <p>If you want a header to never appear alone at the bottom of the page,
    but always be followed by at least one paragraph, just enclose the
    header and the paragraph in an <code>inline-block</code> <code>div</code>.</p>
  </blockquote>
  
  <hr>
  
  <p>The article that I have linked also contains two epub files that can be used as a reference for these examples.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-31T22:47:08.577Z
Answers.Text: I tried this and it created split lines on the ibook reader cutting the line in half top/bottom, seemed to treat it like a graphic instead of text.
Answers.UserDisplayName: bobbdelsol
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-04T10:00:07.227Z
Answers.LastActivityDate: 2017-02-04T10:00:07.227Z
Answers.UserDisplayName: Sekhemty
Answers.Body: <p>I would use </p>
  
  <pre><code>h4 {page-break-after: avoid;}
  
  p {
    widows: 2;
    orphans: 2;
  }
  </code></pre>
  
  <p>I think this works for Kindles as well as epubs. This is just example code. My guess is that this is structured content you would want to use a special class for the paragraphs below the h4. </p>
  
  <p>I would not be surprised if the Kindle  e-ink devices do not support this css property when it is used inside a  divs -- only for h1 or p. </p>
  
  <p>Last time I checked Google Play Books doesn't seem to render this css property correctly (I haven't checked recently though). </p>
  
  <p>Sekhemty's solution probably works too, but it was used when epub readers and kindle devices didn't support these css properties. Now they do. </p>
  
  <p>Read more on this topic in this article <a href="https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh" rel="nofollow noreferrer">https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh</a> (about 2/3 of the way down). </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-06T01:29:11.337Z
Answers.Text: Your answer is a better solution, it allows to keep the files cleaner +1
Answers.UserDisplayName: Sekhemty
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-05T23:48:47.160Z
Answers.LastActivityDate: 2017-02-06T04:12:28.493Z
Answers.LastEditDate: 2017-02-06T04:12:28.493Z
Answers.UserDisplayName: idiotprogrammer
Body: <p>I have a chapter that has brief information for each of the 50 states. Each section begins with a state's name in a h4 tag.</p>
  
  <p>When I preview my book, I sometimes see a header resting on the bottom of a page, with the following paragraph on the next page.</p>
  
  <p>I tried wrapping the header and following paragraph in a div, like this...</p>
  
  <pre><code>&lt;div class="Widow"&gt;
    &lt;h4 class="State" id="me"&gt;Maine&lt;/h4&gt;
    &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then applying this style:</p>
  
  <pre><code>div.Widow { widows: 3; }
  </code></pre>
  
  <p>I also changed widows: 3 to orphans: 3, just to make sure I didn't have it backwards. But it doesn't work.</p>
  
  <p>Can anyone suggest another strategy for gluing a paragraph to a header? </p>
  
Tags: <epub><html><css><editing>
Title: How can I prevent a widowed/orphaned header?
UserDisplayName: WordBear
ThreadText: # How can I prevent a widowed/orphaned header?
  
  (Asked by: username_0 on 2017-02-03)
  
  I have a chapter that has brief information for each of the 50 states. Each section begins with a state's name in a h4 tag.
  When I preview my book, I sometimes see a header resting on the bottom of a page, with the following paragraph on the next page.
  I tried wrapping the header and following paragraph in a div, like this...
  
    Maine
    This is a paragraph.
  
  
  Then applying this style:
  div.Widow { widows: 3; }
  
  I also changed widows: 3 to orphans: 3, just to make sure I didn't have it backwards. But it doesn't work.
  Can anyone suggest another strategy for gluing a paragraph to a header?
  
  **Tags:** epub, html, css, editing
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2017-02-04. Score: 3 | Accepted answer
  
  According to this [blog article](http://www.pigsgourdsandwikis.com/2010/06/goodbye-widows-and-orphans-or-yes-you.html), you should use the `display: inline-block` property on a `div` selector that encloses your header and paragraph.
  
  ---
  
  Here is an excerpt from the said article:
  
  > If you set the `display` property for a `div` to be `inline-block`,
  > iBooks will display the contents of the entire `div` together on a
  > single page, skipping to a new page if necessary, unless the entire
  > `div` can't fit on a page by itself, in which case it will be divided
  > across pages.
  >
  > It's simple and very powerful: `div {display: inline-block}`
  >
  > Here's a short document with no `inline-block` display. Notice how the
  > header is separated from the paragraph that follows it, and even how a
  > bit of the background bleeds through to the following page. Icks. The
  > image and caption are likewise separated. Terrible!
  >
  > [![enter image description here](https://i.sstatic.net/KuVqi.jpg)](https://i.sstatic.net/KuVqi.jpg)
  >
  > [![enter image description here](https://i.sstatic.net/DlMgg.jpg)](https://i.sstatic.net/DlMgg.jpg)
  >
  > Here's the exact same document with one `div` enclosing the header and
  > paragraph and second `div` enclosing the image and caption. Both
  > `div`s were set to `display:inline-block`. The result? Goodbye widows
  > and orphans:
  >
  > [![enter image description here](https://i.sstatic.net/jp41W.jpg)](https://i.sstatic.net/jp41W.jpg)
  >
  > [![enter image description here](https://i.sstatic.net/i8shL.jpg)](https://i.sstatic.net/i8shL.jpg)
  >
  > Where can you use this? As shown here, if you have a series of
  > illustrations with captions, use `inline-block` to keep the caption
  > right under the illustration.
  >
  > If you want a header to never appear alone at the bottom of the page,
  > but always be followed by at least one paragraph, just enclose the
  > header and the paragraph in an `inline-block` `div`.
  
  ---
  
  The article that I have linked also contains two epub files that can be used as a reference for these examples.
  
  > **Comments:**
  > **username_2**: I tried this and it created split lines on the ibook reader cutting the line in half top/bottom, seemed to treat it like a graphic instead of text.  
  
  ---
  
  ### Answer by username_3 on 2017-02-05. Score: 3
  
  I would use 
  h4 {page-break-after: avoid;}
  
  p {
    widows: 2;
    orphans: 2;
  }
  
  I think this works for Kindles as well as epubs. This is just example code. My guess is that this is structured content you would want to use a special class for the paragraphs below the h4. 
  I would not be surprised if the Kindle  e-ink devices do not support this css property when it is used inside a  divs -- only for h1 or p. 
  Last time I checked Google Play Books doesn't seem to render this css property correctly (I haven't checked recently though). 
  username_1's solution probably works too, but it was used when epub readers and kindle devices didn't support these css properties. Now they do. 
  Read more on this topic in this article https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#.tzhyw83kh (about 2/3 of the way down).
  
  > **Comments:**
  > **username_1**: Your answer is a better solution, it allows to keep the files cleaner +1  
  
  ---
  
  