PB div supperposée

J'ai un pb avec la superposition de div et je ne sais pas si ce que je veux réaliser est possible.
Je m'explique. J'ai une carte ou sont placés des points. Chaque point est relié à une div qui correspond à une fiche technique que je vais apparaître ou disparaître au passage de la souris. Jusque là pas de soucis. Seulement, je souhaiterai que les div apparaissent à la même position et non pas décalés verticalement (décalage due au contenu placés dans les div précédentes).

Mon code :

<div class="container">
							
	<div class="col-1 maxheight">
		<div id="carte">
		<img src="images/carte_france.jpg" width="400" height="400" border="0" alt="" usemap="#carte_france_Map">
									<map name="carte_france_Map">
		<area title="Nantes" shape="rect"  alt="" coords="87,152,139,186"onMouseOver="MM_showHideLayers('mode_emploi','','show','quimper','','show','rennes','','hide')" href="#" />
		<area title="Lyon" shape="rect" alt="" coords="259,218,298,264" onMouseOver="MM_showHideLayers('mode_emploi','','show','quimper','','hide','rennes','','show')" href="#">
		<area title="Bordeaux" shape="rect" alt="" coords="96,256,162,294" onMouseOver="MM_showHideLayers('mode_emploi','','show','quimper','','show','rennes','','hide')" href="#">
		<area title="Lille" shape="rect" alt="" coords="223,28,259,67" onMouseOver="MM_showHideLayers('mode_emploi','','show','quimper','','show','rennes','','hide')" href="#">
		<area title="Rennes" shape="rect" alt="" coords="89,99,141,134" onMouseOver="MM_showHideLayers('mode_emploi','','show','quimper','','hide','rennes','','show')" href="#">
		<area title="Quimper" shape="rect" alt="" coords="18,103,77,145" onMouseOver="MM_showHideLayers('mode_emploi','','show','quimper','','show','rennes','','hide')" href="#">
		</map>
		</div>
	</div>
								
	<div class="col-2 maxheight">
		<div class="col-2 maxheight">
			<div id="mode_emploi">
				<p>Vous trouverez sur cette page nos différents sites présents en France.<br />
				Pour obtenir davantage d'information, survolez les puces présentes sur la carte.</p>
			</div>
			<!-- Fiche Quimper -->
			<div id="quimper">
				<p>Site Quimper</p>
			</div>
			<!-- Fiche Rennes -->
			<div id="rennes">
				<p>Site Rennes</p>
			</div>									
		</div>
	</div>
</div>

et le css

	#mode_emploi {
	visibility: visible;
	}
	#quimper {
	visibility: hidden;
	width: 180px;
	}
	#rennes {
	visibility: hidden;
	width: 180px;
	}

En fait je souhaiterai que si la div n'est pas affichée, elle est un height équivalent 0 ou alors que toutes les div se positionnent aux même endroit : possible avec un z-index ? mais je souhaiterai éviter les positions absolute et relative.

Si quelqu'un à une idée.

Merci
Modifié par Gwendall (22 Apr 2009 - 12:17)

Salut,

1) Le code que tu donnes est loin d'être suffisant pour se faire une idée de ta page. L'idéal serait une page en ligne.

2)

a écrit :
je souhaiterai éviter les positions absolute et relative.

A priori, ton problème se règle facilement avec un positionnement absolu. Pourquoi souhaites-tu l'éviter ?