Cas 1 : centrage gauche et droite sur une même ligne

Etant en pleine conversion d’un site en css, je suis tombé sur cet os. Ca a pourtant pas l’air si compliqué que cela. Explication : je voudrais mettre dans le flux courant du texte une ligne de largeur 100% qui me permet de mettre du texte à gauche, aligné à gauche et sur la même ligne du texte à droite aligné droite. Exemple : footer ou header d’une page d’un livre (à gauche : “titre du livre” et à droite : “Page n°123”).

Je sais, je sais, ca va raller, mais ca fait rien.

<p>plein de texte avant dans un paragraphe</p>
<table style='width:100%'>
<tr>
  <td style='text-align:left'>Titre du livre</td>
  <td style='text-align:right'>Page n°123</td>
</tr></table>
<p>plein de texte après dans un  paragraphe</p>

Rendu ci-dessous dans une boite de 500 pixels de large avec du texte avant et après au bout :

Et oui, dans un paragraphe standard aligné gauche, rien n’empeche de mettre juste le numéro de page à droite avec un div float. Reste juste à s’assurer qu’il soit sur la même ligne que celle qu’on désire au départ.

  <p>plein de texte avant dans un paragraphe</p>
  <div style='float:right;'>Page n°123</div>
  <p>Titre du livre</p>
  <p>plein de texte après dans un  paragraphe</p>

Rendu de test :

Mes remarques sur ce cas :

• Il faut mettre le div avant le paragraphe sur lequel on veut s’ancrer. J’ai pas très bien saisi pourquoi, mais ca marche comme cela. Même si l’on met le div dans la balise p, cela ne marche pas. Pourtant, en faisant ainsi, le parent de div serait p et devrait avoir un rendu correct.
• Apparement cette façon marche bien cross-browser.

J’ai comme l’impression que dans beaucoup de cas où l’utilisation des tableaux permettait d’arriver très rapidement à un résultat, la ‘CSS way of doing that’ c’est avec des ul, li.

  <p>plein de texte avant dans un paragraphe</p>
  <ul style='list-style-type: none; width:100%'>
    <li style='float:left;'>Titre du livre</li>
    <li style='float:right;text-align:right'>Page n°123</li>
  </ul>
  <p>plein de texte après dans un  paragraphe</p>

Rendu de test :

Remarques :

1. Le rendu n’est pas bon car il y a interference entre la feuille de style du wiki et ce que je met dans le code. A regarder plus tard.
2. Les menus par ul, il marchent vraiment très bien, mais dans ce cas particulier, il n’y a pas moyen de s’en sortir sans l’ajout de nombreuses propriétés. Ca me semble pas la bonne solution.

Temporaire … Avant l’avis de spécialistes.

La solution est évidement d’utiliser des floats. Cette nouvelle propriété est vraiment versatile, car elle permet de bien séparer les données de la mise en forme.