Предотвратить разрыв страницы между двумя элементами div

У меня сейчас настоящая проблема. Это беспокоит только в Firefox (тестирование с FF10), эта ошибка не возникает в Chrome 17 или любом IE.

Вот в чем дело. У меня архитектура страницы выглядит примерно так

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

РЕДАКТИРОВАТЬ: Некоторые просили часть CSS. Мой код здесь сильно упрощен, вот упрощенная версия CSS для соответствия.

#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;
}

в качестве бонуса рассчитанная высота div #d составляет 874px (вычислено с помощью firebug)

Следует также отметить, что, когда содержимое достаточно короткое, чтобы поместиться на странице, раздел содержимого (#d) выигрывал не имеет разрыва страницы и остается на первой странице.

Это происходит только тогда, когда, например, в chrome, я вижу, что содержимое #d вытечет за край на второй странице.

Итак, вот в чем вопрос. Как предотвратить разрыв строки между разделами #c и #d?