28173 sujets

CSS et mise en forme, CSS3

[Résolu]Centrer une boite entre 2 autres

Bonjour !!

Je vous expose mon problème. J'ai une boite principale qui contient 3 boite alignées. Une tout à gauche, une tout à droite et une que j'aimerais centrer entre le deux. Pour celles de côté pas de problème mais je n'arrive pas à centrer celle du milieu.

Voici mon code :

<div id="corp">
	<div id="gauche">
	</div>
	<div id="milieu">
	</div>
	<div id="droite">
	</div>
</div>


CSS :

/* Page (bordure) : */
#corp
{
	position: relative;
	margin: 0 ;
	padding: 0 ;
	padding-top: 23px ;
	padding-bottom: 15px ;
	clear: left ;
	font-family: Arial, Helvetica, sans-serif ;
	text-decoration: none;
	color: #000000;
	text-align: left;
	background: #ffffff;
	border: 0px solid #f00 ;
}
 
 
/* Partie gauche : */
#gauche
{
	position: relative;
	float: left;
	width : 152px;
	padding: 10px ;
	left: 0 ;
	border: 0px solid #f00 ;
	background: url(images/logo.jpg) ;
}
 
 
/* Contenu du corps : */
#milieu
{
	position: relative ;
	width : 570px ;
	padding: 10px ;
	float: left ;
	border: 1px solid #353535 ;
}
 
 
/* Partie droite : */
#droite
{
	position: relative ;
	float: right ;
	width : 152px ;
	padding: 10px ;
	right: 0 ;
	border: 0px solid #f00 ;
	background: url(images/logo.jpg) ;
}


Mes boites sont en position relative et je n'aimerais pas le changer pour que la hauteur s'adapte au contenu de ma page.

Je vous suis déjà très reconnaissant de prendre du temps pour moi !! MERCI
Modifié par babastutz (28 Sep 2007 - 08:51)
Bon pour l'instant j'ai à peu près centrer la boite avec un left: 15px ; mais cela n'est vraiment pas optimal. Donc si quelqu'un trouve une quelconque solution je suis preneur.
Modifié par babastutz (27 Sep 2007 - 08:42)
Salut,

Je te laisse méditer sur le positionnement des blocs ... Je crois que tu en as besoin Par ici et autres bases indispensables ...

<style type="text/css">
#corp
{
	margin: 0 ;
	padding: 0 ;
	padding-top: 23px ;
	padding-bottom: 15px ;
	font-family: Arial, Helvetica, sans-serif ;
	text-decoration: none;
	color: #000000;
	text-align: left;
	background: silver;
overflow: auto;
	border: 0px solid #f00 ;

}

/* Partie gauche : */

#gauche

{
	float: left;
	width : 152px;
	padding: 10px ;
	border: 0px solid #f00 ;
	background: red ;
}

/* Contenu du corps : */

#milieu
{
	width : 570px ;
	padding: 10px ;
margin: 0 auto;
	border: 1px solid #353535 ;
}

/* Partie droite : */

#droite
{
	float: right ;
	width : 152px ;
	padding: 10px ;
	border: 0px solid #f00 ;
	background: lime ;
}
</style>
</head>
<body>
<div id="corp">
	<div id="gauche">
	</div>
	<div id="droite">
	</div>
	<div id="milieu">
	</div>
</div>
</body>
Sujet clos
Aller à