Agrandir dynamiquement des div "conteneur" avec le contenu d'un de ces div

**fibou34** · 15/10/2013, 10h54

Bonjour

j'essaye de faire un site internet, j'ai structuré ma page avec dans le body : un header, une zone centrale et un footer.

Dans la zone centrale j'ai 3 div (marge gauche, partie centrale et marge de droite). Quand je rempli le contenu de la page centrale, seule la div de cette page centrale s'agrandit. Les div du body, la div globale de la page et les div des marges gauches et droites ne bougent pas.

Comment faire ?

voici le code de mon css :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
BODY 
{
margin: auto;
min-width:1024px; 
height:100%; 
min-height:600px;
background-color:#219390;
}
 
HEADER 
{
margin-left: auto;
margin-right: auto;
height:110px;
width:1024px;
background-color:#FFFFFF;
}
 
FOOTER
{
margin-left: auto;
margin-right: auto;
background-color:#219390;
height:23px;
width:1024px;
}
 
p
{ 
font-family: verdana, Arial, sans-serif;
color: #77695C;
font-size : 0.8em;
font-weight: normal;
text-align:left;
}
 
#DIV-GLOBALE-SITE
{
margin: auto;
height:100%;
width:1024Px;
}
 
#DIV-CENTRALE-BODY 
{
width:1024px;
height:100%;
min-height:600px;
margin-left: auto;
margin-right: auto;
background-color:#FFFFFF;
}
 
#MARGE-GAUCHE 
{
height:100%;
min-height:600px;
width:208px;
float:left;
}
 
#CENTRE
{
float:left;
width:658px;
height:100%;
background-color:#FFFFFF;
min-height:600px;
}
 
#MARGE-DROITE
{
float:left;
width:152px;
height:100%;
min-height:600px;
}

voici le code de ma page:

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
 
<!--<!DOCTYPE html>
<html>-->
    <HEAD>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>test</title>
		<link rel="stylesheet" href="styles-test-simplifie.css"/>
    </HEAD> 
 
	<BODY>	
 
		<DIV ID="DIV-GLOBALE-SITE">
			<HEADER>en tete</HEADER>
 
			<DIV ID="DIV-CENTRALE-BODY">
				<div id="MARGE-GAUCHE">gauche</div>
				<div id="CENTRE"><P>C'est ce contenu qui permet d'agrandir dynamiquement la page CENTRE mais le body et les marges, eux, ne s'agrandissent pas.</P></div>
				<div id="MARGE-DROITE">droite</div>
			</DIV>
 
			<FOOTER>pied de page</FOOTER>
		</DIV>
	</BODY>
</html>

Merci beaucoup pour votre aide.

**Torgar** · 15/10/2013, 11h17

Salut,

Il est fini le temps où l'on écrivait les balises HTML en majuscule...

Pourquoi avoir commenté le doctype ?

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

1
2


Edit: avec la coloration syntaxique ma question n'est plus d'actualité...

Agrandir dynamiquement des div "conteneur" avec le contenu d'un de ces div

CSS

Partager

Partager