Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné par plein de choses :)

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis

CSS – Un contenu pleine page avec 2 colonnes de taille fixe

Une petite astuce CSS très rapidement. Comment faire un contenu pleine page avec une colonne à gauche et à droite qui ont une taille bien définie ? La réponse avec le petit bout de code ci-dessous :

  • Le code HTML :
1
2
3
<div class="col_milieu">Le contenu du milieu</div>
<div class="col_gauche">La colonne de gauche</div>
<div class="col_droite">La colonne de droite</div>
  • Le code CSS :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.col_milieu{
	float:left;
	width:100%;
	background:grey;
}
.col_gauche{
	float:left;
	margin-left:-100%;
	min-height:270px;
	overflow:hidden;
	width:168px;
	background:red;
}
.col_droite{
	float:left;
	margin-left:-168px;
	min-height:270px;
	overflow:hidden;
	width:168px;
	background:yellow;
}

Vous pouvez tester avec une live démo

1 commentaire

Paul Poulet
1 Mar 2011 à 22:36

Une excellente astuce simple à mettre en place ! Merci.

Répondre