28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je ne comprends ca fait plusieurs jours que je cherche, je bloque

J'ai travaillé sur mon site avec des hauteurs fixes pour mes balises div, maintenant j'aimerais que mes hauteurs soit automatiques.
Des que je modifie la hauteur fixe de la div du milieu à 100%, mon pied de page (div bas) se place n'importe comment. Smiley decu

#bordure_principal {
	position: relative;
	height: 100%;
	width: 776px;
	margin-left: -388px;
	left: 50%;
	top: 3px;
	padding: 0px;
}
#principal {
	height: 100%;
	width: 770px;
	margin-left: 3px;
	background-color: #FFFFFF;
}
#haut {
	height: 124px;
	width: 770px;
	background-image: url(../../image/banniere/jpg/banniere.jpg);
	background-repeat: no-repeat;
}
#milieu {
	height: 100%;
	width: 764px;
	margin-top: 8px;
	margin-left: 3px;
	margin-right: 3px;
	background-color: #FFFFFF;
}
#milieu_centre {
	float: left;
	height: 100%;
	width: 464px;
	padding: 0px;
}

#milieu_droit {
	float: left;
	height: 100%;
	width: 150px;
}
#bas {
	height: 24px;
	width: 770px;
	background-color: #dce3f0;
}
#milieu_gauche {
	float: left;
	height: 100%;
	width: 150px;
}
Bonjour fanny,

Il n'est pas possible actuellement (avec CSS 2.x) d'obtenir des colonnes de même hauteur...

En attendant CSS3 il est possible de contourner le problème :
- passer par un javascript (qui va calculer la hauteur de la plus grande colonne puis affecter cette valeur aux autres),
- si le design le permet, utiliser la méthode des colonnes factices (simulation des différentes colonnes à travers une unique image),
- faire une mise en page qui prend toute la hauteur de la fenêtre, et jouer avec les backgrounds des conteneurs pour simuler les colonnes (plusieurs exemples ici),
- utiliser un tableau de mise en page sur lequel le height:100% fonctionnera.

Plus d'infos dans la FAQ :

Comment faire des "colonnes" de même hauteur ?
Hauteur 100% à un élément
Je pense pouvoir trouver mon bonheur dans les liens proposés

merci, je vais approfondir pour faire mon choix