Problème de disposition (display : table-cell)

Bonjour tout le monde,

Je suis en train de réaliser une page de contact et j'ai décidé d'utiliser la propriété css display: table et display : table-cell afin d'avoir 2 div de la même hauteur :

<div id="ligne2">
	<div id="formulaire">
		<h3>Nous contacter</h3>
		<form>
			// Ici le formualmiare
		</form>
	</div>
	<div id="col2">
		<div id="map">
			// Ici la carte google maps
		</div> 
	</div>
</div>

Et voici les css que j'utilise :

div#content.contact #ligne2{
	display:table;
	width:100%;
}

div#content.contact #ligne2>div{
	display:table-cell;
	border: 1px solid #363636;
}

div#map {
	width : 495px;
	height: 445px;
	border : 3px solid #FFF;
	margin: 35px auto 0 auto;
}

Le problème que j'ai est que si je ne rempli pas la div de la carte, mon formulaire part en tout en bas de la div :
http://postimage.org/image/jtzkwei4z/

J'ai beau avoir vérifié qu'il n'y ai pas de marges haute ou quoi que ce soit, je ne vois pas d'où cela peut venir.

Si quelqu'un a une idée ...

Merci d'avance.

Hello,

Le code que tu donnes ne peut pas provoquer le résultat que tu montres en capture d'écran. Il y a forcément d'autres facteurs (styles supplémentaires, styles des contenus du formulaire et de la carte...). On peut voir une page en ligne?

Par ailleurs, si tu n'as pas encore l'habitude de travailler avec des outils tels que Firebug ou Web Inspector je te conseille de t'y mettre, et d'utiliser le mode d'inspection pour vérifier les dimensions réelles des blocs, comment ils se situent, quels styles sont appliqués (y compris des styles hérités ou définis ailleurs), etc.