Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
	<head>
	<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

	</head>
	<body>
		<nav>
			<h4>CHAPITRE</h4>
		<ul>
			<li><a href="#1">Multilignes</a></li>
			<li><a href="#2">Séparation de colonnes</a></li>
			<li><a href="#3">Texte sur plusieurs colonnes</a></li>
			<li><a href="#4">Saut de colonnes</a></li>
			<li><a href="#5">Césures</a></li>
		</ul>
		
		</nav>
		
		
	<div class="block">
		<h1 id="1">MULTILIGNE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Videmus igitur ut conquiescere ne infantes quidem possint. Istic sum, inquit. Duo Reges: constructio interrete.</p>

<p>Egone non intellego, quid sit don Graece, Latine voluptas? Quid de Pythagora? Quid enim tanto opus est instrumento in optimis artibus comparandis? Ratio quidem vestra sic cogit. Quae diligentissime contra Aristonem dicuntur a Chryippo. Nam si quae sunt aliae, falsum est omnis animi voluptates esse e corporis societate. De illis, cum volemus. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Proclivi currit oratio.</p>
<h2>Sous Titre 1</h2>
<p>Tum Torquatus: Prorsus, inquit, assentior; Qui est in parvis malis.

Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quodcumque in mentem incideret, et quodcumque tamquam occurreret.</p>

<p>Quam nemo umquam voluptatem appellavit, appellat; At certe gravius. Qui ita affectus, beatum esse numquam probabis; Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Nam Pyrrho, Aristo, Erillus iam diu abiecti. Deprehensus omnem poenam contemnet. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Sed quia studebat laudi et dignitati, multum in virtute processerat. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Ita nemo beato beatior.</p>
		
<h2>Sous Titre 2</h2>

<p>Illis videtur, qui illud non dubitant bonum dicere -; Non risu potius quam oratione eiciendum? Aliter homines, aliter philosophos loqui putas oportere? Quid autem habent admirationis, cum prope accesseris? Illud non continuo, ut aeque incontentae. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus;</p>

<p>Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Nunc haec primum fortasse audientis servire debemus. Inde igitur, inquit, ordiendum est. Quod ea non occurrentia fingunt, vincunt Aristonem; Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Dicimus aliquem hilare vivere; Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens.</p>
		
<h2>Sous Titre 3</h2>

<p>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Quis non odit sordidos, vanos, leves, futtiles? Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Non semper, inquam; Non est igitur voluptas bonum. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit;</p>

<p>Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate. Non est igitur voluptas bonum.</p>

<p>Ut optime, secundum naturam affectum esse possit. Erit enim mecum, si tecum erit. Nunc omni virtuti vitium contrario nomine opponitur. Eadem nunc mea adversum te oratio est. Quo modo autem philosophus loquitur? Hoc loco tenere se Triarius non potuit.</p>
		
		</div>

		<!-- Séparation de colonnes-->
			<div class="block-sep">
		<h1 id="2">SEPARATION DE COLONNES</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Videmus igitur ut conquiescere ne infantes quidem possint. Istic sum, inquit. Duo Reges: constructio interrete.</p>

<p>Egone non intellego, quid sit don Graece, Latine voluptas? Quid de Pythagora? Quid enim tanto opus est instrumento in optimis artibus comparandis? Ratio quidem vestra sic cogit. Quae diligentissime contra Aristonem dicuntur a Chryippo. Nam si quae sunt aliae, falsum est omnis animi voluptates esse e corporis societate. De illis, cum volemus. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Proclivi currit oratio.</p>
<h2>Sous Titre 1</h2>
<p>Tum Torquatus: Prorsus, inquit, assentior; Qui est in parvis malis.

Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quodcumque in mentem incideret, et quodcumque tamquam occurreret.</p>

<p>Quam nemo umquam voluptatem appellavit, appellat; At certe gravius. Qui ita affectus, beatum esse numquam probabis; Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Nam Pyrrho, Aristo, Erillus iam diu abiecti. Deprehensus omnem poenam contemnet. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Sed quia studebat laudi et dignitati, multum in virtute processerat. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Ita nemo beato beatior.</p>
		
<h2>Sous Titre 2</h2>

<p>Illis videtur, qui illud non dubitant bonum dicere -; Non risu potius quam oratione eiciendum? Aliter homines, aliter philosophos loqui putas oportere? Quid autem habent admirationis, cum prope accesseris? Illud non continuo, ut aeque incontentae. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus;</p>

<p>Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Nunc haec primum fortasse audientis servire debemus. Inde igitur, inquit, ordiendum est. Quod ea non occurrentia fingunt, vincunt Aristonem; Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Dicimus aliquem hilare vivere; Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens.</p>
		
<h2>Sous Titre 3</h2>

<p>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Quis non odit sordidos, vanos, leves, futtiles? Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Non semper, inquam; Non est igitur voluptas bonum. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit;</p>

<p>Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate. Non est igitur voluptas bonum.</p>

<p>Ut optime, secundum naturam affectum esse possit. Erit enim mecum, si tecum erit. Nunc omni virtuti vitium contrario nomine opponitur. Eadem nunc mea adversum te oratio est. Quo modo autem philosophus loquitur? Hoc loco tenere se Triarius non potuit.</p>
		
		</div>
				<!-- FIN séparation de colonnes-->
			<!-- Texte sur plusieurs colonnes-->
			<div class="plusieurs-col">
		<h1 id="3">TEXTE SUR PLUSIEURS COLONNES</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Videmus igitur ut conquiescere ne infantes quidem possint. Istic sum, inquit. Duo Reges: constructio interrete.</p>

<p>Egone non intellego, quid sit don Graece, Latine voluptas? Quid de Pythagora? Quid enim tanto opus est instrumento in optimis artibus comparandis? Ratio quidem vestra sic cogit. Quae diligentissime contra Aristonem dicuntur a Chryippo. Nam si quae sunt aliae, falsum est omnis animi voluptates esse e corporis societate. De illis, cum volemus. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Proclivi currit oratio.</p>
<h2>Sous Titre 1</h2>
	<img src="https://static.pexels.com/photos/30773/pexels-photo-30773.jpg" alt="photo" />
<p>Tum Torquatus: Prorsus, inquit, assentior; Qui est in parvis malis.

Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quodcumque in mentem incideret, et quodcumque tamquam occurreret.</p>

<p>Quam nemo umquam voluptatem appellavit, appellat; At certe gravius. Qui ita affectus, beatum esse numquam probabis; Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Nam Pyrrho, Aristo, Erillus iam diu abiecti. Deprehensus omnem poenam contemnet. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Sed quia studebat laudi et dignitati, multum in virtute processerat. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Ita nemo beato beatior.</p>
		
<h3>Sous Titre 2</h3>

<p>Illis videtur, qui illud non dubitant bonum dicere -; Non risu potius quam oratione eiciendum? Aliter homines, aliter philosophos loqui putas oportere? Quid autem habent admirationis, cum prope accesseris? Illud non continuo, ut aeque incontentae. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus;</p>

<p>Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Nunc haec primum fortasse audientis servire debemus. Inde igitur, inquit, ordiendum est. Quod ea non occurrentia fingunt, vincunt Aristonem; Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Dicimus aliquem hilare vivere; Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens.</p>
		
<h3>Sous Titre 3</h3>

<p>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Quis non odit sordidos, vanos, leves, futtiles? Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Non semper, inquam; Non est igitur voluptas bonum. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit;</p>

<p>Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate. Non est igitur voluptas bonum.</p>

<p>Ut optime, secundum naturam affectum esse possit. Erit enim mecum, si tecum erit. Nunc omni virtuti vitium contrario nomine opponitur. Eadem nunc mea adversum te oratio est. Quo modo autem philosophus loquitur? Hoc loco tenere se Triarius non potuit.</p>
		
		</div>
				<!-- FIN texte sur plusieurs colonnes-->
		
			<!-- SAUT DE COLONNE-->
			<div class="saut">
		<h1 id="4">SAUT DE COLONNES</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Videmus igitur ut conquiescere ne infantes quidem possint. Istic sum, inquit. Duo Reges: constructio interrete.</p>

<p>Egone non intellego, quid sit don Graece, Latine voluptas? Quid de Pythagora? Quid enim tanto opus est instrumento in optimis artibus comparandis? Ratio quidem vestra sic cogit. Quae diligentissime contra Aristonem dicuntur a Chryippo. Nam si quae sunt aliae, falsum est omnis animi voluptates esse e corporis societate. De illis, cum volemus. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Proclivi currit oratio.</p>
<h2>Sous Titre 1</h2>
				
<p>Tum Torquatus: Prorsus, inquit, assentior; Qui est in parvis malis.

Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quodcumque in mentem incideret, et quodcumque tamquam occurreret.</p>

<p>Quam nemo umquam voluptatem appellavit, appellat; At certe gravius. Qui ita affectus, beatum esse numquam probabis; Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Nam Pyrrho, Aristo, Erillus iam diu abiecti. Deprehensus omnem poenam contemnet. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Sed quia studebat laudi et dignitati, multum in virtute processerat. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Ita nemo beato beatior.</p>
		
<h3>Sous Titre 2</h3>

<p>Illis videtur, qui illud non dubitant bonum dicere -; Non risu potius quam oratione eiciendum? Aliter homines, aliter philosophos loqui putas oportere? Quid autem habent admirationis, cum prope accesseris? Illud non continuo, ut aeque incontentae. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus;</p>

<p>Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Nunc haec primum fortasse audientis servire debemus. Inde igitur, inquit, ordiendum est. Quod ea non occurrentia fingunt, vincunt Aristonem; Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Dicimus aliquem hilare vivere; Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens.</p>
		
<h3>Sous Titre 3</h3>

<p>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Quis non odit sordidos, vanos, leves, futtiles? Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Non semper, inquam; Non est igitur voluptas bonum. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit;</p>

<p>Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate. Non est igitur voluptas bonum.</p>

<p>Ut optime, secundum naturam affectum esse possit. Erit enim mecum, si tecum erit. Nunc omni virtuti vitium contrario nomine opponitur. Eadem nunc mea adversum te oratio est. Quo modo autem philosophus loquitur? Hoc loco tenere se Triarius non potuit.</p>
		
		</div>
				<!-- FIN saut de colonnes-->		
		
					<!-- CESURES-->
			<div class="cesures">
		<h1 id="5">CESURES</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Videmus igitur ut conquiescere ne infantes quidem possint. Istic sum, inquit. Duo Reges: constructio interrete.</p>

<p>Egone non intellego, quid sit don Graece, Latine voluptas? Quid de Pythagora? Quid enim tanto opus est instrumento in optimis artibus comparandis? Ratio quidem vestra sic cogit. Quae diligentissime contra Aristonem dicuntur a Chryippo. Nam si quae sunt aliae, falsum est omnis animi voluptates esse e corporis societate. De illis, cum volemus. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Proclivi currit oratio.</p>
<h2>Sous Titre 1</h2>
				
<p>Tum Torquatus: Prorsus, inquit, assentior; Qui est in parvis malis.

Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quodcumque in mentem incideret, et quodcumque tamquam occurreret.</p>

<p>Quam nemo umquam voluptatem appellavit, appellat; At certe gravius. Qui ita affectus, beatum esse numquam probabis; Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Nam Pyrrho, Aristo, Erillus iam diu abiecti. Deprehensus omnem poenam contemnet. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Sed quia studebat laudi et dignitati, multum in virtute processerat. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Ita nemo beato beatior.</p>
		
<h3>Sous Titre 2</h3>

<p>Illis videtur, qui illud non dubitant bonum dicere -; Non risu potius quam oratione eiciendum? Aliter homines, aliter philosophos loqui putas oportere? Quid autem habent admirationis, cum prope accesseris? Illud non continuo, ut aeque incontentae. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus;</p>

<p>Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Nunc haec primum fortasse audientis servire debemus. Inde igitur, inquit, ordiendum est. Quod ea non occurrentia fingunt, vincunt Aristonem; Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Dicimus aliquem hilare vivere; Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens.</p>
		
<h3>Sous Titre 3</h3>

<p>Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Quis non odit sordidos, vanos, leves, futtiles? Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Non semper, inquam; Non est igitur voluptas bonum. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit;</p>

<p>Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate. Non est igitur voluptas bonum.</p>

<p>Ut optime, secundum naturam affectum esse possit. Erit enim mecum, si tecum erit. Nunc omni virtuti vitium contrario nomine opponitur. Eadem nunc mea adversum te oratio est. Quo modo autem philosophus loquitur? Hoc loco tenere se Triarius non potuit.</p>
		
		</div>
				<!-- FIN CESURES-->
		
		
		
	</body>
</html>
              
            
!

CSS

              
                /*  ------ MULTI-COLONNES ------ */

/*.block{
	margin-bottom: 2em;
	column-width: 50px;
	column-count:5;
}*/

.block{
	margin-bottom: 2em;
	border-bottom: red 3px solid;
	columns: 50px 5;
}

/*.block{
	margin-bottom: 2em;
	column-width: 50px;
	column-count:5;
	-moz-column-width: 50px;
	-moz-column-count:5;
	-webkit-column-width: 50px;
	-webkit-column-count:5;
}*/

/*.block{
	margin-bottom: 2em;
	column-width: 50px;
	column-count:5;
	-moz-columns: 5 50px;
	-webkit-columns: 5 50px;
}*/
/*  ------ SEPARATION DE BLOCS ------ */

.block-sep{
	margin-bottom: 2em;
	border-bottom: red 3px solid;
	
	columns: 50px 5;
	-moz-columns: 50px 5;	
	-webkit-columns: 50px 5;
	
	column-rule: dotted blue 1px;
	-moz-column-rule: dotted blue 1px;
	-webkit-column-rule: dotted blue 1px;

	column-gap:5px;
	-moz-column-gap:5px;
	-webkit-column-gap:5px;
}
/*  ------ TEXTE SUR PLUSIEURS COLONNES ------ */
.plusieurs-col{
		margin-bottom: 2em;
	border-bottom: red 3px solid;
	
	columns: 50px 5;
	-moz-columns: 50px 5;	
	-webkit-columns: 50px 5;
	
	column-rule: dotted blue 1px;
	-moz-column-rule: dotted blue 1px;
	-webkit-column-rule: dotted blue 1px;

	column-gap:5px;
	-moz-column-gap:5px;
	-webkit-column-gap:5px;
}

.plusieurs-col h2{
	column-span:all;
	-moz-column-span:all;
	-webkit-column-span:all;
	text-align:center; /* Permets de centrer le titre*/ 
}

img{
	width:100%;/* Permets de redimensionner l'image, elle prend ainsi la place dispo*/
}
/*  ------ SAUT DE COLONNE ------ */

.saut{
		margin-bottom: 2em;
	border-bottom: red 3px solid;
	
	columns: 50px 5;
	-moz-columns: 50px 5;	
	-webkit-columns: 50px 5;
	
	column-rule: dotted blue 1px;
	-moz-column-rule: dotted blue 1px;
	-webkit-column-rule: dotted blue 1px;

	column-gap:15px;
	-moz-column-gap:15px;
	-webkit-column-gap:15px;
}


.saut h3+p{
	break-inside:avoid-column;
	-moz-break-inside:avoid-column;
	-webkit-break-inside:avoid-column;
	
}
.saut h2{
	break-before:column;
	-moz-break-after:column;
	-webkit-break-after:column;
	
}
.saut p{
	text-align:justify;
}

/*  ------ CESURES ------ */
.cesures{
	margin-bottom: 2em;
	border-bottom: red 3px solid;
	
	columns: 50px 5;
	-moz-columns: 50px 5;	
	-webkit-columns: 50px 5;
	
	column-rule: dotted blue 1px;
	-moz-column-rule: dotted blue 1px;
	-webkit-column-rule: dotted blue 1px;

	column-gap:15px;
	-moz-column-gap:15px;
	-webkit-column-gap:15px;
	
	text-align:justify;
	hyphens:auto;
	-moz-hyphens:auto;
	-webkit-hyphens:auto;

}




/* NAV */
nav{
	position:fixed;
	right:10px;
	background-color:rgb(55,55,55);
	border-radius:10px;
}

nav h4{
	text-align:center;
	color:#900
}

nav ul{
	list-style-type:none;
	line-height:20px;
}
nav a{
	text-decoration:none;
	color:#900;
}

nav a:hover{
	text-decoration:none;
	color:#fff;
}

              
            
!

JS

              
                
              
            
!
999px

Console