Boites flottantes - Alignement vertical

Bonjour,

Je n'arrive pas à aligner deux boites flottantes (<div style="float: left;">)
Je voudrais qu'elles soient alignées par leur milieu.
J'i essayé vertical-align sans grand succès.
Connaîtriez-vous la bonne manière de faire cela ?

Merci,

JM

Aurais-tu un bout de code, ou un lien à nous mettre sous la dent ?

Merci de l'intérêt que tu me portes.

Un bout de code simple et générique pour illustrer mon propos :

<div id="main">
    <div id="gauche" style="float: left"><img src="img/image.jpg" alt="image" /></div>
    <div id="droite" style="float: left"><p>Un texte super intéressant.</p></div>
</div> <!-- main -->

Voilà, le but du jeu étant d'aligner les deux boites par leur milieu.

Merci,

JM
Modifié par jml44 (17 Sep 2007 - 11:06)

Je ne suis pas un expert en la matière donc je vais te donner une solution que j'aurais utilisé.
Attention, ce n'est surement pas la meilleure.
C'est juste pour te dépanner en attendant une réponse plus propre.

Je metterai bien le tout dans une cellule d'un tableau, où tu définis :

<table>
  <tr>
    <td valign="middle"> Tes divs </td>
  </tr>
</table>

seby2027 a écrit :
Attention, ce n'est surement pas la meilleure.

À l'heure actuelle, si, ça reste la meilleure solution. Sauf que plutôt que valign="middle", on pourra utiliser vertical-align: middle; dans la feuille de style (en visant le td avec un sélecteur qui va bien).

seby2027 a écrit :
C'est juste pour te dépanner en attendant une réponse plus propre.

La réponse plus propre, c'est l'utilisation de display: table et display: table-cell, malheureusement pas supportés par Internet Explorer (versions 6 et 7).

Merci à vous deux.
Je voulais justement éviter d'utiliser les tableaux au maximum, que je ne considère justifiés que pour de la présentation de données.
Mais s'il n'y a pas d'autre solution, je ne vais pas avoir le choix.
Merci pour vos éclaircissements.

JM