Interdire la séparation d'un élément div sur deux pages à l'impressi

Bonjour,

Je suis en train de créer des règles css pour l'impression d'une page html et j'ai un petit problème:

J'ai sur ma page plusieurs éléments section qui se suivent avec la structure suivante (simplifié ici):

<section class="exp">
    <div class="element">
        <div class="datesLieux">
            ....... contenu .........
        </div>
        <div class="desc">
            <ul>
                <li> ..... </li>
                <li> ..... </li>
                .....
             </ul>
         </div>
    </div>
</section>

les div.datesLieux et div.desc ont la propriété display: table-cell, chaque section à la propriété display: table

Lorsque je souhaite imprimer, je m'aperçois que certains blocs div.element sont coupés en deux, le contenu se séparant donc sur deux pages.

Comment éviter cela ? Je ne souhaite pas introduire de changement volontaire de page à certains endroits précis de mon document, mais simplement éviter, au maximum, qu'un bloc div.element se retrouve séparé sur deux pages (donc introduire un changement automatique de page avant ou après le bloc).

Je remercie d'avance toute personne qui pourra m'aider
Modifié par methos1435 (09 Jan 2014 - 13:47)

salut,
normalement ça se fait avec la propriété css "page-break-before". Cela te permet de contrôler à quel moment la page doit être coupée si cela devait arriver.

Bonjour et merci pour ta réponse

Mais je ne souhaite justement pas décider où la page doit être coupée. Je veux juste empêcher qu'une div soit séparée sur deux pages.

Ça reste du CSS : tu peux réduire la taille des blocs, le corps du texte, etc. Cependant si tu as besoin de deux pages, tout tasser sur une seule n’est pas forcément une bonne idée : contrôler quels éléments vont sur quelle page semble en être une meilleure…

Il existe, toujours avec "page-break", une propriété "page-break-inside" qui peut être passée à "avoid" mais le problème c'est qu'elle n'est pas interprétée par FF, Safari et Chrome.
Je pense que les mises en page pour impression représentent presque un travail à part vu que c'est relativement embêtant d'autant que ça changera selon que ça soit en mode portrait ou paysage.

Merci pour vos réponses !

page-break-inside semble correspondre à ce que je cherche. Mais effectivement ce n'est pas supporté par chrome...

Je voulais justement éviter, pour un document donné, d'avoir à maintenir une version en ligne et un pdf. Je vais me débrouiller autrement.

Bonne journée