Steemit tutorial: Dual-column formatting / Mise en Page Les colonnes [Post Fr]

This is a tutorial to explain how to make columns as in newspapers!

---

J'avais dit que j’arrêtai de faire des posts sur la mise en page, la typographie... car je pensais vous avoir délivrer toutes mes connaissances dans ce domaine.
Mais, ce que j'oubliai, c'est que je ne sais pas tout !

J'ai eu besoin pour mon post sur les bots, d'utiliser les colonnes. Besoin... non, mais j'en avais vraiment envie !

Je voulais tout particulièrement soigner la mise en page et souhaitais donc essayer les colonnes.
Après avoir essayé les solutions trouvées sur Google, sans parvenir à mes fins, je me suis dit,

Qu'à cela ne tienne ! je vais faire plus direct, @roxane doit forcément savoir. 😍
Et bien non, elle ne savait pas. 😞

Je vous passe tous les détails qui m'ont permis de réussir... et je veux donc vous les faire partager pour que vous sachiez

comment faire des colonnes dignes d'un article de journaliste !

On va tout d'abord commencer par la théorie que je vais vous illustrer en image.

Insérer deux colonnes

Il vous suffit :
1- De commencer votre première colonne par la balise, <div class="pull-left"> et d'écrire le texte,
2- De le fermer avec la balise, </div>
3- De continuer par la balise, <div class="pull-right"> et d'écrire le texte de votre seconde colonne,
4- De le fermer avec la balise. </div>

J'ai pris pour exemple mon article sur les bots que j'ai un petit peu adapté pour qu'il soit utile pour vous montrer ce qu'il est possible de faire :

<div class="pull-left">
@minnowhelper 
Offre min. 0.1
Montant de l'upvote 4.03
[Conditions particulières](https://steemit.com/upvote/@minnowhelper/requirements-for-using-minnowhelper) 
***
@pushup 
Offre min. 0.01
Montant de l'upvote à 100% 2.87
Je suis surprise de découvrir un post de ce bot qui valorise les utilisateurs avec un classement du top 10, euh... utiliser un bot upvote n'est quand même une gloire... et je suis choquée de voir qu'avec 70 utilisations, le plus fervent utilisateur n'est personne d'autre que le créateur du bot !?!
<center>![](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510789123/kznlmgtkh6nm2tya1si2.png)
</center>
</div>
<div class="pull-right">
@LoveJuice 
Offre min. 0.1
Montant de l'upvote à 100% 1.34
[Promotion Lovejuice Minnow](https://steemit.com/writing/@lovejuice/lovejuice-is-paying-5-sbd-for-creative-work-to-post-through-the-lovejuice-page-lovejuice-minnow-promotion) désormais ouvert à tous les types de post (pas uniquement érotique 😃)
***
@buildawhale
Offre min.  0.500
Montant de l'upvote 167.47
Depuis quelques jours, afin selon eux, d'être dans la promotion d'un contenu de qualité, les commentaires ne sont plus "upvotables".
[Curation digest](https://steemit.com/buildawhale/@buildawhale/being-featured-in-our-curation-digest-just-got-really-intereusdting)
<br>
<br>
<br>
<br>
<br>
<br>
</div>

Et voici le résultat :

Pour vous aider encore un peu :

<div class="pull-left">
LE TEXTE DE VOTRE COLONNE DE GAUCHE
</div>
<div class="pull-right">
LE TEXTE DE VOTRE COLONNE DE DROITE
</div>

et hop, pour votre article, on copie / colle et il ne reste plus qu'à mettre le texte!

Pour retourner à la mise en page normale après votre section à deux colonnes, vous devrez ajouter autant de saut de ligne que de lignes manquantes pour équilibrer avec la colonne la plus longue comme cela :

J'ai volontairement accentué l'écart pour bien vous montrer mais j'aurais pu équilibrer les deux colonnes de texte et mettre moins de balise. <br>

J'ai découvert, après avoir compris que la balise <br> ne fonctionnait pas dans ce cas sur Utopian.io, que vous pouvez également tiré un trait qui vous permettra d'y arriver bien plus facilement (avec un trait en plus bien sur :-) ).
Après la deuxième balise </div>,sautez une ligne puis insérez ***et le tour est joué !

</div>
Saut de ligne
***
Votre texte reprend sans colonne.

J'espère que ce tuto. vous a été utile 😏, à bientôt.

Christel.

---

---

Posted on Utopian.io - Rewarding Open Source Contributors

---