Comment aligner la limite inférieur de 2 div

Salut à tous,

Je souhaiterais aligner la bordure inférieure de 2 div qui sont côte à côte (navigation et contenu).

Je sais qu'il existe une technique avec une colonne factice mais je ne penses pas que ça puisse fonctionner pour le cas présent.

Voici l'adresse temporaire du site web:

http://artchitek.be/websites/closregina/test.html

Et voici la structure html:

<div id="global">

	<div id="entete"></div>

<div id="conteneur">

	<div id="navigation"></div>

	<div id="contenu"></div>

</div><!-- #conteneur -->

</div><!-- #global -->

Quelques informations du css:

#global {
	width: 784px;
	margin-left: auto;
	margin-right: auto;
	background-image:url('header.png');
	background-repeat:no-repeat;
}

#conteneur {
	margin-top:185px;
	padding: 0;
}

#navigation {
	font-family: Arial, Verdana, sans-serif;
	color: #000000;
	[b]margin-top: 102px;[/b]
	background: #181A12;
	background-image:url('bg.nav.jpg');
	width: 168px;
	float: left; /* -> 2 */
	border-bottom: 3px solid;
	border-color:white;
}

#contenu {
	width: 574px;
	color: #363B29;
	background: #cbd888;
	margin-top: 25px;
	margin-left: 167px; /* -> 4 */
	margin-bottom: 20px;
	padding: 10px 20px;
	background-image:url('bg.contenu.jpg');
	border-right: 3px solid;
	border-bottom: 3px solid;
	border-color:white;
}

Merci d'avance pour votre aide
Modifié par halau (23 Feb 2010 - 16:11)

J'en profite pour demander autre chose. J'ai fais un test du site sur IE 7 et il part complétement en cacahuète :



Est-ce que quelqu'un pourrait me donenr quelques conseil pour arranger ça?

Merci beaucoup

Bonjour,

Les colonnes factices sont effectivement la solution de ton problème.

Pour IE7 le problème vient d'un manque d'espace pour que le bloc s'insérer correctement. Si tes calculs de dimensions sont corrects, vérifie que ton doctype est conforme.

Merci pour ta réponse.

Je vais donc voir du côté des colonnes factices. C'est tout de même bizarre qu'ils n'aient toujours pas incorporé un système plus simple dans les nouvelles versions du xhtml/css.

Concernant le stresse sur IE, j'ai fais le test en agrandissant la largeur de la div globale mais la sidebar à gauche ne se situe toujours pas à la bonne place (elle reste trop haute). Ca m'étonnerait que ce problème y soit relié. Tu ne sais pas d'où ça pourrait venir d'autre?

merci

Salut,
Avec ton code ou une page en ligne, il serait plus facile d'en déterminé la cause...

halau a écrit :
Je vais donc voir du côté des colonnes factices. C'est tout de même bizarre qu'ils n'aient toujours pas incorporé un système plus simple dans les nouvelles versions du xhtml/css.

Ils ont incorporé un système plus simple. Il s'agit notamment de display:table-cell (CSS2, 1998...). Mais comme ça n'est pas supporté par IE7, ça reste une solution peu praticable pour l'instant.

halau a écrit :
Concernant le stresse sur IE (...)

Un rapport avec le fait que le margin-left du contenu de droite fasse un pixel de moins que la largeur de la colonne de gauche? À voir.

Merci pour vos réponses.

@juliesunset: J'essaye de mettre en ligne le travail au fur et à mesure sur l'adresse que j'ai donné au début. :

http://artchitek.be/websites/closregina/test.html

@Florent: J'ai fais plusieurs corrections dont certaines que pour IE ( . Le problème dont je parlais avec la sidebar a disparut (pour l'instant). Y'a encore quelques petits bug mais ça commence à aller.

Je reposterai si ça coince complétement. Merci pour votre aide.