Bonjour,

Je crée une page sur deux colonnes. La colonne de gauche est de largeur fixe. La colonne de droite occupe l'espace restant.
Jusqu'à maintenant, j'utilisais les boîtes flexibles (flex).

Dans mon cas, relativement simple, il me semble plus facile d'utiliser grid-template-columns que je ne connaissais pas jusqu'à aujourd'hui.
J'essaye donc ceci:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#mainSection
{
	width:100%;
	grid-template-columns:230px 1fr;
}
#left
{
	margin:0;
	padding:3px;
	font-size:.9rem;
}
#right
{
	padding-left:20px;
	padding-right:20px;
}
Malheureusement, mon bloc #right passe sous le bloc #left au lieu de rester à côté. Que faire? Dans mon essai, ce bloc ne contient que du texte.

Structure html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<body>
	<header>
	</header>
	<div id="mainSection">
		<div id="left">
			div id="right">
			</div>
		</div>
	</div>
</body>