Div centrée dans une div marche pas

**Jitou** · 16/02/2013, 17h09

Bonjour à tous,

J'essais de centrer une div dans une autre, celà marche sous IE mais pas Chrome ...

Code html :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#frameHeaderContainer {
 position: absolute; top: 0px; left: 0px;
 width: 1024px; height: 50px;
 border:solid 2px gray; 
}
 
#frameHeader {
 margin: 10px;
 height: 30px;
 border:solid 2px gray;
}
</style>
</head>
<body>
 
<div id="frameHeaderContainer">
<div id="frameHeader">
</div>
</div>
 
</body>
</html>

**rodolphebrd** · 16/02/2013, 17h49

Bonjour,

Vous devez prendre en compte dans vos dimensions de boite, height et border.

Le conteneur fait 50px de height et le bloc frameHeader 30px + 2px + 2px.

Donc avec un padding top et bottom de 8px tout rentre dans l'ordre.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#frameHeaderContainer {
	width: 1024px;
	height: 50px;
	border:solid 20px gray;
}
#frameHeader {
	margin: 8px;
	height: 30px;
	border:solid 2px gray;
	background-color:navy;
}

Note: la position absolute ne sert à rien.

**NoSmoking** · 16/02/2013, 18h27

Bonjour,
une lecture saine Utiliser le modèle des boites CSS

**Jitou** · 17/02/2013, 10h15

Merci rodolphebrd ! Je n'avais effectivement pas envisagé prendre en compte l'épaisseur du border pour la marge (je pensais à une gestion automatique par l'interpréteur de CSS).

Merci également à NoSmoking je vais de ce pas lire attentivement cette page

Div centrée dans une div marche pas

CSS

Vue hybride

Discussions similaires

Partager

Partager