[résolu] Décalage vertical entre deux div en float

Bonjour,

Sur le blog de la Médiathèque dont je m'occupe, je rencontre un problème d'affichage que je ne m'explique pas : dans chaque bandeau bleu et vert, il y a un décalage vertical entre la partie gauche (bleue) et la partie droite (verte) : les titres "Nos achats précédents" et "Les prêts précédents" s'alignent SOUS le titre de la partie gauche ! (au lieu d'être au même niveau)

Il s'agit pourtant de deux div placées respectivement en float: left et float: right.

Voici le code HTML utilisé (les deux parties se nomment respectivement "left-part" et "right-part") :

<div class="post-content">
	<div class="conteneur odd first">
		<div class="post">
			<div class="left-part">
				<div class="post-details-top">
					<h3 class="post-title handwriting"><a href="http://sxjpl.free.fr/biblio/post/Le-philosophe-du-dimanche-%3A-La-vie-et-la-pens%C3%A9e-d-Alexandre-Koj%C3%A8ve-%5BBroch%C3%A9%5D">Le philosophe du dimanche : La vie et la pensée d'Alexandre Kojève [Broché]</a></h3>
					<p class="date"><abbr title="lundi 21 février 2011">21.02.11</abbr></p>
				</div>
				<div class="post-content">
					<img src="/dotclear-files/public/images/biblio/.Filoni_-_Le_philosophe_du_dimanche_t.jpg" class="left" width="100px" height="100px" alt="" />
					<div class="handwriting">Le fait est bien connu, Alexandre Kojève a exercé une influence majeure sur la philosophie française d'après 1915, à partir de l'enseignement sur Hegel dispensé dans son séminaire à l'École pratique des hautes études au cours des années 1930 et recueilli, par les soins de Raymond Queneau, dans son Introduction à la lecture de Hegel, parue en 1947. Mais au-delà de cette notoriété certaine, le (...)</div>
				</div>
			</div>
			<div class="right-part">
				<h3>Nos achats pr&eacute;c&eacute;dents</h3>
				<ul>
					<li class="post  ">
						<a href="http://sxjpl.free.fr/biblio/post/L-Av%C3%A8nement-de-la-d%C3%A9mocratie-%3A-Tome-3%2C-A-l-%C3%A9preuve-des-totalitarismes-1914-1974">L'Avènement de la démocratie : Tome 3, A l'épreuve des totalitarismes 1914-1974</a>
					</li>
					<li class="post odd ">
						<a href="http://sxjpl.free.fr/biblio/post/Alexandre-Jardin%2C-Des-gens-tr%C3%A8s-bien">Alexandre Jardin, Des gens très bien</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Et voici le code CSS qui lui est associé :

.dc-adultes .conteneur { padding: 0; margin: 0; display: table; width: 100%; table-layout: fixed; }
	.dc-adultes .ISIE67 .conteneur { background: #9CC url("../img/conteneur.png") top left repeat-y; }
		.dc-adultes .ISIE67 .conteneur.odd { background: #9CC url("../img/conteneur_odd.png") top left repeat-y; }
.dc-adultes .conteneur .left-part { padding: 20px 30px; float: none; display: table-cell; width: 549px; }
	.dc-adultes .ISIE67 .conteneur .left-part { float: left; }
.dc-adultes .conteneur .right-part { float: none; display: table-cell; width: 270px; border-left: 1px solid #FFF; background-color: #9CC; border-top-right-radius: 15px; border-bottom-right-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; }
	.dc-adultes .ISIE67 .conteneur .right-part { float: right; }
	.dc-adultes .conteneur.odd .right-part { background-color: #9C0; }
.dc-adultes #content .conteneur .right-part h3, .dc-adultes #content .conteneur .right-part ul li a { display: block; padding: 10px 25px; border-bottom: 1px solid #FFF; text-align: left; }
.dc-adultes #content .conteneur .right-part ul, .dc-adultes #content .conteneur .right-part ul li { list-style-type: none; padding: 0; margin: 0; border: 0; }
	.dc-adultes .ISIE67 #content .conteneur .right-part ul { list-style-position: outside; }
	.dc-adultes #content .conteneur .right-part ul li a { background-color: #9CC; }
		.dc-adultes .ISIE67 #content .conteneur .right-part ul li a { zoom: 1; }
		.dc-adultes #content .conteneur.odd .right-part ul li a { background-color: #9C0; }
		.dc-adultes #content .conteneur .right-part ul li a:hover, .dc-adultes #content .conteneur .right-part ul li a:active, .dc-adultes #content .conteneur .right-part ul li a:focus { background-color: #276E7F; color: #FFF; }
.dc-adultes #content .conteneur .right-part h3 { font-weight: bold; }

Un grand merci pour toute aide qui pourrait m'être apportée !
Modifié par Fix (08 Feb 2012 - 15:42)

La propriété table-cell donne à ta boite un comportement de cellule de tableau et reprend par défaut donc le comportement du vertical-align à "baseline". Si tu assignes un vertical-align:top sur ta partie droite, ça devrait résoudre le problème.

Effectivement, je n'avais pas pensé à cela... Un très grand merci !