Mise en page DIV CSS

Version imprimable

Bonjour à vous tous et merci d'avance de votre aide.
J'ai beau lire les tutoriaux sur Developpez.com.
Mais je n'arrive pas à résoudre ce simple probléme.

J'ai trois DIV

DIVA, DIVB et DIVC

DIVB à une largeure fixe de 1020px et doit être centrer par rapport au navigateur.

DIVA et DIV sont les DIV latéraux gauche et droit et j'aimerais qu'il remplisse l'espace vide laisse sur les coté par DIVB.
Code:

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 <style type="text/css">  </style>
J'ai réussi à faire cela sur une page de test simple.
Et voici le site, pour avoir une idée de quoi je parle. Merci à vous.
http://www.delightfactory.eu/

Merci encore.
J'aurais encore une petite question et je la poserais aprés si ça dérange pas.

01/05/2009, 15h01
Macmillenium

Bonjour,

Selon le code CSS, les deux divs A et C ont un la même couleur du background #F00 ... autant la mettre directement sur le body !
Attention à la taille de ton conteneur 1020px c'est un peu trop et provoque l'apparition d'une scrollbar horizontale dans le cas des résolutions 1024 par exemple.
01/05/2009, 15h07
Rifton007

Merci de la réponse, mais DIVA et DIVB ont deux couleurs distinct.
Et pour la largeur de DIVC je vais revoir ça.

Mais le probléme se pose pas là, c'est juste une page de test pour la mise en page. Ce que je veux c'est remplir à l'aide de mes Div A et B les espaces latéraux vide laisser par la DIV 1020 avec largeur fixe de 1020px.

Merci

Une solution ...

Code:

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
 
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	text-align: center;
}
 
#A {
	background-color: #F00;
	position:absolute;
	width:50%;
	left:0;
	z-index:1;
	top:0;
	height:100%;
}
 
#C {
	background-color: #0F0;
	position:absolute;
	width:50%;
	right:0;
	z-index:1;
	top:0;
	height:100%;
}
 
#B {
	background-color: #00F;
	width: 900px;
	position:relative;
	z-index:2;
	margin-right: auto;
	margin-left: auto;
}

01/05/2009, 16h47
Rifton007

Mille fois merci de ta précieuse aide.
Je suis arrivé à un résultat assez convainquant.
Juste petit bémole que je n'arrive pas à résoudre.

Mes DIV latéraux A et C n'occupe pas toute la hateur disponible.
Tu peux voir à ta droite que la DIV C s'arrête, malgré sont height:100%;

http://www.delightfactory.eu/

Encore merci

Citation:

Envoyé par Rifton007

Tu peux voir à ta droite que la DIV C s'arrête, malgré sont height:100%;

Oui, les deux blocs se limitent à la hauteur du viewport, je n'avais pas fais attention à ce point.
Cependant, comme l'objectif est seulement décoratif, tu peux tenter le positionnement fixed avec le correctif IE6-

Code:

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
 
<!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" dir="ltr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Sans nom</title>
	<style type="text/css">
                html, body {
                        margin: 0px;
                        padding: 0px;
                        height: 100%;
                        text-align: center;
                }
                 
                #a {
                        background-color: #F00;
                        position:fixed;
                        width:50%;
                        left:0;
                        z-index:1;
                        top:0;
                        height:100%;
                }
                
                #b {
                        background-color: #00F;
                        width: 900px;
                        position:relative;
                        min-height:100%;
                        z-index:2;
                        margin-right: auto;
                        margin-left: auto;
                }
                 
                #c {
                        background-color: #0F0;
                        position:fixed;
                        width:50%;
                        right:0;
                        z-index:1;
                        top:0;
                        height:100%;
                }
        </style>
 
	<!--[if lte IE 6]>
	<style type="text/css">
		#a, #c {
			position: absolute;
			top :expression(CorrectIE6 = - this.offsetHeight + document.documentElement.clientHeight + document.documentElement.scrollTop + "px" );
		}
	</style>
	<![endif]-->
 
</head>
 
<body>
 
 
<div id="a">&nbsp;</div>
<div id="b">
	bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla
</div>
<div id="c">&nbsp;</div>
 
</body>
</html>

Il reste encore une solution qui consiste à retirer le conteneur du flux soit avec position:absolute soit position:fixed mais fortement déconseillé pour des risques d'inaccessibilité visuelle.

02/05/2009, 13h37
Rifton007

Merci de ton aide elle me cera surement trés utile et me permettra de terminer le projet.

Encore merci, chokran ;-)