Créer une page sur deux colonnes

**moimp** · 25/06/2024, 19h26

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>

**ProgElecT** · 25/06/2024, 23h39

Salut

Peut être

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>
		<div id="right">
		</div>
	</div>
</body>

ligne 7 il te manque le < pour ta div id="right">

**moimp** · 26/06/2024, 09h10

Merci tu as raison mais le problème n'était pas là car le chevron existe bien dans le code réel.
J'ai trouvé mon erreur, il manquait display:grid;.
Maintenant tout fonctionne.

Créer une page sur deux colonnes

Tableau en CSS

Discussions similaires

Partager

Partager