diviser un message en deux colonnes

obtenir ces boutons

Afficher un message en plusieurs colonnes

Pour afficher un message en deux colonnes avec un code simplifié, il suffit d'utiliser les codes suivants, dans la version HTML du message :

<div style="width: 45%; float: left;">Contenu de la colonne gauche ici</div>

<div style="width: 45%; float: right;">Contenu de la colonne droite ici</div>

<div style="clear: both;"></div>

* * * * *
Pour afficher un message en deux colonnes, on peut aussi utiliser les codes suivants (en noir), dans la version HTML du message :

<div class="col1-2">
Contenu de la colonne gauche ici Contenu de la colonne gauche ici

</div><div style="div class="col2-2">
Contenu de la colonne droite ici Contenu de la colonne droite ici

</div><div style="clear: both;"></div>


et de remplacer les textes "Contenu de ..." par la moitié du message, ce qui donne :

Contenu de la colonne gauche ici Contenu de la colonne gauche ici


Contenu de la colonne droite ici Contenu de la colonne droite ici
* * * * *
Pour afficher un message en trois colonnes, il suffit d'utiliser les codes suivants (en noir), dans la version HTML du message :

<div class="col1-3">
Contenu de la colonne gauche ici Contenu de la colonne gauche ici

</div><div class="col2-3">
Contenu de la colonne centrale ici Contenu de la colonne centrale ici

</div><div class="col3-3">
Contenu de la colonne droite ici Contenu de la colonne droite ici

</div><div style="clear: both;"></div>

ce qui donne :

Contenu de la colonne gauche ici Contenu de la colonne gauche ici


Contenu de la colonne centrale ici Contenu de la colonne centrale ici


Contenu de la colonne droite ici Contenu de la colonne droite ici
* * * * *
Préalablement, il faudra avoir ajouté dans un gadget HTML/JavaScript, le code suivant :

<style type="text/css">
.col1-2 {width: 48%; float: left;}
.col2-2 {width: 48%; float: left;margin-left:2%;}
.col1-3 {width: 31%; float: left;}
.col2-3 {width: 31%; float: left;margin-left:2%;}
.col3-3 {width: 31%; float: left;margin-left:2%;}
</style>

Comment ajouter un gadget HTML/JavaScript sur un blog

On peut évidemment y ajouter des codes de mise en page spécifiques : police de caractères, couleur, taille, ...

3 commentaires:

IDESQIS a dit…

Bonjour.
J'ai fait ce que vous avez dit mais la mise en page en colonne n'est pas prise en compte.

Les 2 phrases se retrouve l'une en dessous de l'autre au lieu d'etre cote à cote.

Meiser a dit…

Bonjour.

Les colonnes sont peut-être trop larges. L'espace total peut aussi être insuffisant.


Matthieu Froment a dit…

Bonsoir,

Je n'arrive pas à mettre 2 widgets côte à côte...

Quelqu'un peut-il m'aider ?

Merci d'avance