[Résolu] Div a hauteur variable

(voir géométrie variable)

Bonjour a tous,

Je viens a vous a cause d'un problème sur lequel je planche depuis un moment. J'ai eu beau chercher et bidouiller (je sais c'est pas bien ) je ne trouve pas la réponse.
J'ai parcouru le forum et suivi les exemples que j'ai pu trouver mais rien a faire. Alors dernier recourt, je post

Donc le html

<div class="contener">
    <div class="siteleft">
    <!-- Inclusion d'un menu (dans un div également) -->
         <div class="siteright">
         <!-- Inclusion du contenu de la page -->
         </div>
    </div>
</div>

Et le css qui va avec :

.contener 
{ 
	position:absolute;
	top:275px;
        overflow: hidden; 
        width:90%;
}

.siteleft {
	width:100%;
	overflow:hidden;
}

.siteright {
	float:right;
	width:85%;
	overflow:hidden;
}

.menu_left {
	float:left;
	width:15%;
	overflow:hidden;
}

En principe ma page varie en fonction de la taille de la fenetre (en largeur) jusque la ca fonctionne bien. Ce que je voudrais c'est que mon menu et mon contenu fasse la même taille. Et qu'il varie en fonction du contenue de la page. (Je sais pas si je suis clair )
En bref que le div "menu_left" est une hauteur égale au div "siteright".

Voila merci d'avance et @++ ^^

ps : le site que j'essaie de faire. (toute remarque est bienvenue )
http://voutre.mon.village.free.fr/
Je veux que le menu de gauche soit a la hauteur du div blanc (qui varie en fonction du contenu)
Modifié par fex1011 (16 Jan 2010 - 00:13)

Hello fex1011 et bienvenue,

une erreur classique quand on débute est de vouloir tout positionner avec des position:absolute. Le problème est que cela sort les éléments du flux et pose de nombreux problèmes.

Je t'invite à prendre tout ton temps pour lire (et comprendre ) : le Guide de survie du positionnement CSS.

En bonus :
* Réalisation d'un design complet (XHTML / CSS) en 5 étapes (pour voir le cheminement qu'il faut suivre).
* Gabarits de mise en page (pour partir sur de bonnes bases).

Salut, merci de la réponse mais mon problème (je sais pas si t'as regardé le site) est que j'ai un header assez spécial avec des positions absolute justement (je crois que je suis obligé pour avoir ce resultat) et du coup, mon conteneur, je dois le mettre a une position bien défini en hauteur et sans le absolute je vois pas trop. Mon conteneur passera sous mon header si je fait comme sur le tuto que tu m'as donné.

Mon header : J'ai deux div superposés pour le header rouge et l'ombre et en dessous le div vert avec la banniere.

.header {
	top:0px;
	height: 110px;
	width: 350px;
	position:absolute;
	z-index:2;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.ombre {
    float:left;
    clear:left;
    position:absolute;
  	background-image:url(img/ombre.png);
	top:0px;
  	height: 115px;
	width: 355px;
	z-index:3;
}
.header2 {
	text-align:center;
	position:absolute;
	z-index:1;
	top:75px;
	height: 200px;
	width: 90%;
	text-align:center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

Eh bien oui j'ai regardé ton site.

D'où ma remarque sur le positionnement absolu : à par pour ce fameux encart rouge il est totalement inutile et je te réinvite donc à lire les liens que je t'ai donnés plus haut.

J'en profite pour ajouter qu'il faut structurer une page (notamment en utilisant des titres Hn) et qu'il faut donc choisir les éléments html en fonction de leur sémantique.
Modifié par Heyoan (15 Jan 2010 - 20:42)

Donc juste pour etre sur et si j'ai bien compris, j'enlève mes position absolute et je joue sur le positionnement des div avec des margin / padding? (enfin surtout celle du header vert, après les autres devraient suivre)

Et je laisse le absolute sur le rouge et l'ombre a cause de leur superposition (z-index)
Modifié par fex1011 (15 Jan 2010 - 22:34)

Exactement !

Dis-moi pas que c'est pas vrai que tu as déjà fini de lire tous les tutos !

Non j'ai juste lu le premier pour le moment mais avec les explications j'ai compris le principe. J'vais continuer ma lecture pour approfondir le sujet