28173 sujets

CSS et mise en forme, CSS3

Alignement de 3 div dans un autre div

bonjour,

je voudrais aligner 3 div contenu dans un autre div voilà ce que j'ai fait
les différents styles

div#conteneur
{
	width: 95% ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #44526B ;
	background: #D7DDE6 ;
}
p#entete
{
	height: 100px ;
	margin: 0 ;
	background: #C5C8D6;
}
p#pied { 
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: center ;		
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	background-color: #C5C8D6;
}
div#contenu
{
	padding: 0 25px 5px 0px ;
	background: #dd0000;
}

div#milieu_gauche {	
	left:0;
	width: 140px;	
	background-color: #D7DDE6;			 
}	  
div#milieu_contenu { 
	margin-left: 140px;
	margin-right: 140px; 	  
	border-left:1px solid #44526B; 
	border-right:1px solid #44526B;	
	background-color: #FFFFFF;	  
}
div#milieu_droite {
	right:0;  
	width: 140px; 	
	background-color: #D7DDE6;	
}


ma page

<body>	 
<div id="conteneur">
<p id="entete">
	Bienvenue
</p>
	
<div id="contenu">
  <div id="milieu_gauche">
     menu de gauche
  </div>
  <div id="milieu_contenu">
     contenu de la page
  </div>
  <div id="milieu_droite">
     menu de droite
  </div>
</div>

<p id="pied">	  
bas de ma page
</p> 			  
</div>
</body>



j'ai pris modèle sur l'exemple suivant de votre site :ici

votre modele m'a permis de réaliser le cadre de ma page le haut et le bas.
maintenant je voudrais aligner mes 3 div milieu dans le div contenu.
avez vous une idée?
merci
Modifié par rdams (01 Mar 2007 - 23:11)
Bonjour,

Tu as utilisé les propriétés left et right pour positionner tes blocs. Ces propriétés ne marchent qu'avec un bloc positionné en absolu (position: absolute) ou en relatif (position: relative).

Plusieurs des modèles d'Alsacréations pointés par ghost utilisent le positionnement absolu pour les colonnes latérales. Problème : un élément positionné en absolu sort du flux normal, et en gros les autres éléments font comme s'il n'était pas là. Ce qui peut poser problème, par exemple si tu as des colonnes latérales plus longues (ou potentiellement plus longues) que la colonne centrale, qui sera la seule (n'étant pas positionnée en absolu) à pouvoir repousser le pied de page.

Solution : si les colonnes latérales doivent accueillir un contenu dont la hauteur est variable et/ou importante, utiliser des colonnes flottantes.
Un petit exemple :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
Dans ce cas, on n'oubliera pas d'attribuer un clear: both au pied de page.

Enfin, si tout ceci est trop lourd à mettre en place, utiliser un tableau HTML à trois cellules.
Sujet clos
Aller à