Problème avec float !

Bonjour à tous.

J'ai besoin d'aide.
J'ai un petit souci avec les interlignes et alignement vertical.
Je n'y arrive pas.
Bien évidement, cela devrait (idéalement !) fonctionner sous IE et les autres !

Je voudrais réaliser une div avec le texte disposé comme dans l'image suivante :

Cliquez pour l'agrandir, svp.

J'ai pourtant lu avec attention :
http://www.alsacreations.com/xmedia/tuto/exemples/vertical/demos.html#cv_lignes
Mais je n'y arrive pas !
Pouvez-vous m'aider en adoptant cette solution ?


Voici le CSS en question :

#gauche {
	font-size: 28px;
	width: 100px;
	float: left;
	display: inline-block;
	height: 40px;
	vertical-align: middle;
	line-height:13px;
}
#droite {
	font-size: 12px;
	width: 100px;
	float: left;
	display: inline-block;
	line-height: 12px;
	height: 40px;
	vertical-align: middle;
	line-height:13px;
}

Voici la page "test" :

<div id="gauche">Ajouter</div>
<div id="droite">au<br />panier</div>

Modifié par jytest (27 Nov 2011 - 02:51)

Bonjour,

Ne pas combiner display:inline-block (qui devrait suffire ici) avec float.
Et sinon, j'ai la flemme de reconstituer une page de test, qui pourrait être différente de ta page de test à toi (absence ou présence de Doctype par exemple...). Le plus efficace c'est de fournir une URL.