aligner 3 div

Tags:

source: http://forum.alsacreations.com/topic-4-58450-1-RESOLU-Aligner-3-div-cote...  post du

HTML : <div id="left"></div> <div id="center"></div> <div id="right"></div>

CSS :

body {
	margin: 0;
	padding: 0;
}

div {
	height: 313px;
}

#center {
	width: 978px;
	margin: 0 auto;
	background-color: red;
}

#left, #right {
	width: 50%;
	position: absolute;
	top: 0;
	z-index: -1;
}

#left {
	left: 0;
	background: blue url(image_de_gauche.jpg) right repeat-x;
}

#right {
	right: 0;
	background: green url(image_de_droite.jpg) left repeat-x;
}

<div> d'ID "center" centrée grâce aux marges automatiques puisqu'elle reste dans le flux courant. Par contre, les <div> adjacentes sont quant à elles positionnées en absolute et "calées" contre les bords du <body> grâce aux déclarations left: 0; et right: 0;. Il ne reste plus qu'à les placer en-dessous de la partie centrale en jouant avec le z-index.