Contre-Attaque: Texte aligné à droite et à gauche sur la même ligne

Objet: Mettre sur la même ligne, un texte (ou une image) aligné à droite pour l'un et à gauche pour l'autre.

Le problème c'est que l'on ne peut pas utiliser la balise div, parce que c'est une balise block, par conséquent, elle entraine une retour à la ligne...par exemple

<div align="left">Titre</div><div align="right">Aide</div>

donne

On ne peut pas non plus utiliser la balise span qui pourtant est une balise inline, parce que là c'est le navigateur qui ne comprend pas

<span align="left">Titre</span><span align="right">Aide</span>

donne

On peut utiliser un tableau avec deux colonne, dont l'une serait alignée à gauche et l'autre alignée à droite

<table width="100%" border="0" style="background:#8a180e">
<tr>
<td>
<div align="left">Titre</div>
</td>
<td>
<div align="right">Aide</div>
</td>
</tr>
</table>
texte

donne

Aide

texte

Alors il y a quelques petits problèmes
Le premier est que cela redimensionne légèrement la hauteur de ligne... en fait de la taille de la bordure du tableau, même invisible elle est présente.
La seconde est que l'on ne peut pas écrire directement en dessous du tableau, ce qui est ennuyeux pour un menu que l'on souhaite toujours le plus petit possible
Enfin on est obligé de recoder le tableau pour chacun de nos titres, mieux vaut utiliser l'outil Css

La solution se trouve dans le système d'imbrication des balises, on a déjà approché ce système dans l'astuce liens différents sur les titres, je rappel qu'on les caractérisait dans le Css comme suit
.post-title a:link {
color:#FFFFFF;
}
Ce que l'on pourrait exprimer en language parlé par "si le texte est un lien hypertexte et qu'il se trouve dans le titre du billet (post-title), alors colore le texte en blanc", il faut (entre guillemets) 2 conditions pour que le texte soit coloré en blanc

Ce que l'on souhaite, c'est de caractériser une balise à l'intérieur d'un titre, qui aurait pour fonction de mettre le texte à droite
on va faire cela dans la balise .post-title que nous connaissons, il suffit de donner un nom simple à une balise que l'on imbiquerait dans celle du titre du billet

Je peux l'appeler BalisePourMettreLeTexteADroite, mwouais un peu trop long, je peux l'appeler TexteTitreDroite, ou n'importe quel autre nom que l'on souhaite, mais je peux aussi simplment lui donner le nom d'une balise existente, qui dans ce cas particulier (mettre un texte à droite sur un titre) aurait une valeur différente de celle que l'on lui connait habituellemnt.
Il est "d'usage" pour faire cela d'utiliser la balise em qui sert justement à accentuer/mettre en évidence un texte
(mieux vaut appeler une balise en faisant <em> qu'en faisant <span class="BalisePourMettreLeTexteADroite">, mais a chacun de choisir ;)

On écrit alors le code Css suivant
.post-title em {
float:right;
text-align:right;
font-style:normal;
}

Il fonctionera donc lorsque l'on appellera la balise em, dans le titre du post,
on dit bien au texte de se mettre à droite float:right et text-align:right et en plus on demande à la balise em de perdre sa mise en forme (accentué en italiques) et de devenir un texte normal font-style:normal

on l'appel avec le code html

<span class="post-title"><em>Aide</em>Titre</span>

AideTitre

On peut constater qu'il faut mettre la balise em en premier, dans le cas contraire, son contenu ne s'afficherait pas
Je reconnais que cette astuce n'est pas à première vue très utile, mais cela devient bien pratique lorsque l'on souhaite offrir un espace relativement interactif en ajoutant la possibilité aux menus de s'afficher ou de se masquer, ou simplement si l'on veux les identifier avec des icones

Pour aller plus loin, il suffit de parcourir notre thème et de regarder le nombre de fois ou l'imbrication des balises est utilisée, pour comprendre son importance