Untitled

dabblet.css

	/**
	 * Centrer une bannière en CSS avec des côtés fixes et des blocs étirables
	 *
	 * @note: De manière plus moderne, le display table et l'utilisation de border-image pourraient aussi être des solutions possiblement plus propre.*
	 */
	#banniere {
		position: relative;
		height: 100px; /* pour donner une taille */
	}
	#banniere > div {
		height: 100px;
		min-width: 100px;
	}
	.ban_gauche {
		background-color: red;
		position: absolute;
		left: 0;
		top: 0;
	}
	.ban_repeat_gauche {
		background-color: yellow;
		float: left;
		width: 50%;
	}
	.ban_droite {
		background-color: blue;
		position: absolute;
		right: 0;
		top: 0;
	}
	.ban_repeat_droite {
		background-color: green;
		float: right;
		width: 50%;
	}
	.ban_centre {
		background-color: pink;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -300px;
		width: 600px;
		z-index: 2; /* pour s'assurer que le centre soit toujours au dessus des autres. À spécifier selon ton cas précis */
	}

dabblet.html

<div id="banniere">
	<div class="ban_gauche"></div>
	<div class="ban_repeat_gauche"></div>
	<div class="ban_centre"></div>
	<div class="ban_repeat_droite"></div>
	<div class="ban_droite"></div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}