Bonjour à tous,

Je suis actuellement en pleine création et un problème important ce pose à moi. Je cherche à faire un site qui soit completement flexible en hauteur et en largeur en fonction de la page.

Le site contient un bandeau haut, un centre et un pied de page. et le centre contient une colonne à gauche et une colonne à droite. Comme le montre le lien ci-dessous:

Essai

Mais lors de ma création, deux problèmes s'opposent à moi et se trouvent non-résolus:

1) Le centre dépasse en bas de page et fait automatiquement apparaitre un scrolling. Comment puis-je régler cette hauteur?

2) Entre les deux colonnes se trouvent le contenu et celui-ci n'apparait pas à l'écran alors qu'il est visible dans le code source.

Voici le code source:
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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: 100%;
        right: 0px;
        background-color: #666666;
        }
        
barreCentre {
        position: absolute;
        margin-left: 100px;
        margin-right: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
 
<body>
	<div id="bandeau"></div>
	<div id="centre">
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">ertertertert</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
	</div>
	<div id="footer"></div>
</body>
</html>
Pouvez-vous m'aider rapidement, j'ai besoin d'aide, c'est très urgent.

Merci par avance