Prevent Page Break between 2 div elements

Question

I'm having quite the problem now. It's only bothering in Firefox (Testing with FF10), this bug doesn't happen in Chrome 17 or any IE.

Here's the thing. I have a page architecture looking like this

<div id="container">
    <div id="a">
        <img src="foo/bar.png" />
    </div>
    <div id="b">
        <div id="c">
            <!--short content-->
        </div>
        <div id="d">
            <!--long content-->
        </div>
    </div>
</div>

EDIT: Some asked for the a part of the CSS. My code here being simplified a lot, here's a simplified version of the css to match.

#container {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

#a{
    height: 156px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 2px;
    width: 918px;
}

#b {
    background-color: #FFFFFF;
    font-size: 12px;
    margin: 0 auto;
    text-align: left;
    width: 958px;
}

#c{
    background: url("images/top_content.gif") no-repeat scroll left top #FFFFFF;
    height: 50px;
    margin: 0 auto;
    width: 100%;
}

#d{
    padding: 40px 0px;
}

as a bonus, the calculated height of the #d div is 874px (caculated with firebug)

Should aslo point out that when the content is short enough to fit in the page, the content section (#d) won't have a page break and stays on the first page.

This only happens when, for example in chrome, I can see that the content of #d will bleed out on the second page.

So here is the question. How do I prevent a line break between the #c and #d divs?

Answer 1

You mean how to prevent a page-break when printing?

#c{
    page-break-after: avoid;
}

#d {
    page-break-before: avoid;
}

Note that the 'new' way of doing it would be using the generic break-before and break-after like this:

#c{
    break-after: avoid-page;
}

#d {
    break-before: avoid-page;
}

But this is not supported in all browsers yet. See https://developer.mozilla.org/en-US/docs/Web/CSS/break-before and https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

Answer 2

I came here, with the same problem. And I found a solution!

My Situation:

• I have a div that serves as a heading
• then another div that contains a very long pre
• that pre extends across multiple pages

Example:

<div>Heading</div>
<div>
    <pre>Very long pre.</pre>
</div>

The Problem:

• My Heading Div appears on page 1
• The pre starts on page 2 - so HUGE gap between the "heading" and content.

The Solution:

Finally, I tried making my pre style display: inline. Tada! Now my heading div and the beginning of the pre start on page 1 together!

Perhaps you can mess with the display of your elements to control this better. Hope this helps whoever may stumble here again!