2 Divs, dont une à largeur variable

Version imprimable

Bonjour,
je m'essaye aux divs de largeur variable, et ça me rend fou... :fou:
- colonne gauche : largeur "fixe" (20%, mini 240px) ;
- colonne droite : largeur "variable" (largeur restante de la fenêtre, mini 700px).
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 <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>test</title> <style type="text/css"> * { margin:0; padding:0; } html { margin:0; padding:0; height:100%; } body { margin:0; padding:0; background:#ccc; overflow:auto; } #global { position:relative; clear:both; overflow:hidden; background:#fff; } #bloc1 { clear:both; margin:10px 0; background:#999; } #bloc1-colG { float:left; width:20%; min-width:240px; background:orange; } #bloc1-colD { overflow:hidden; min-width:700px; background:#155; } #bloc1-menu { overflow:hidden; height:100%; float:right; padding:10px 0; width:240px; background:green; } #bloc1-contenu { overflow:hidden; margin:15px; border:1px solid #111; background:yellow; } </style> </head> <body> <div id="global">  <div id="bloc1"> <div id="bloc1-colG"> <div id="bloc1-menu"> bloc1-menu </div> </div> <div id="bloc1-colD"> <div id="bloc1-contenu"> <p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti.</p> </div> </div> </div> </div> </body> </html>
Quand on réduit la largeur de la fenêtre du navigateur, le contenu passe en dessous du menu.
Seul Firefox a le "bon comportement".
Sinon, imposer width:1000px; sur #global, mais ce n'est PAS ce que je cherche : je veux la largeur totale de la fenêtre.

1/ Comment garder menu et contenu côte-à-côte ?

2/ Question subsidiaire :
J'aimerais aussi que les menu remplissent la hauteur totale disponible (fond vert prenant ici la même hauteur que le contenu)
J'ai essayé height:100%; sur les bloc-menu, sans succès.
Comment faire ?

Je dois être en hypoglycémie, car je n'arrive à rien...
Merci.

13/09/2011, 13h55
Candygirl

Hello,

Citation:

Envoyé par jreaux62

Seul Firefox a le "bon comportement".
Sinon, imposer width:1000px; sur #global, mais ce n'est PAS ce que je cherche : je veux la largeur totale de la fenêtre.

1/ Comment garder menu et contenu côte-à-côte ?

Plutôt que de donner un width à #global, donne-lui un min-width de 940px et tu devrais obtenir le comportement souhaité sur tous les navigateurs (sauf IE6)

Citation:

Envoyé par jreaux62

2/ Question subsidiaire :
J'aimerais aussi que les menu remplissent la hauteur totale disponible (fond vert prenant ici la même hauteur que le contenu)
J'ai essayé height:100%; sur les bloc-menu, sans succès.
Comment faire ?

Un height en % n'est appliqué que si son parent a un height explicitement renseigné, ce qui n'est pas le cas ici. Tu peux éventuellement passer par un display:table pour faire en sorte que ta colonne gauche et ta colonne droite soient de la même hauteur, et vu la largeur fixe de ton menu (240px), utiliser la technique des fausses colonnes. A voir la mise en page finale que tu souhaites...
13/09/2011, 14h21
Invité

Merci Candygirl,
je m'arrache les cheveux depuis ce matin !

j'avais en effet vu display:table, sans savoir si c'était un moyen "correct".
Je sens que c'est la bonne voie...
En tout cas, celle qui ressemble le plus au fonctionnement de ces bonnes vieilles <table> !

Oups ! par contre, ce n'est pas supporté par IE7...

Ca me saoule... grave... :evilred:
Je ne m'en sors pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
|---------------------|------------------------------------------------------------|
| colonne gauche :    | colonne droite :                                           |
| largeur fixe        | largeur variable, qui s adapte à la largeur de la fenêtre  |
| -> 20% (mini 260px) | -> reste de la fenêtre (mini 700px)                        |
|---------------------|------------------------------------------------------------|
 
Quand on réduit la fenêtre :
|------------------|------------------------------------|
| colonne gauche : | colonne droite :                   |
| 260px            | mini 700px                         |
|------------------|------------------------------------|
            (+ barre de scroll horizontale)
<------------------------------------------------------->

Si une bonne âme pouvait me donner LA solution...
Merci.

Qqch comme ça ?

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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 	<title>test</title>
 
	<style type="text/css">
                #main {min-width:960px;}
                 
                #left {
                        float:left;
                        width:20%;
                        min-width:260px;
                        background:red;
                }
 
                #right  {
                        overflow:auto;
                        background:green;
                        min-width:700px;
                }
                
                #tmain {
                        width:100%;
                        min-width:960px;
                        display:table;
                }
                 
                #tleft {
                        display:table-cell;
                        width:20%;
                        min-width:260px;
                        background:red;
                }
 
                #tright         {
                        display:table-cell;
                        width:80%;
                        min-width:700px;                        
                        background:green;
                }               
        </style>
 
</head>
<body>
	<div id="main">
		<div id="left">float gauche largeur 20% min 260px</div>
		<div id="right">droite largeur restante (overflow) min 700px<br>droite largeur restante (overflow) min 700px</div>
	</div>
	<div id="tmain">
		<div id="tleft">table-cell largeur 20% min 260px</div>
		<div id="tright">table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px</div>
	</div>	
</body>
</html>

1 pièce(s) jointe(s)

Citation:

Envoyé par Candygirl

Qqch comme ça ?

:ccool: bien vu !

J'ai pris la solution sans display:table :
(et ajouté un header et un footer)

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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 	<title>test</title>
 
	<style type="text/css">
*				{ margin:0; padding:0; }
html 			{ margin:0; padding:0; height:100%; width:100%; }
body 			{ margin:0; padding:0; height:100%; width:100%; background:#ccc; overflow:auto; }
 
#global 		{ clear:both; width:100%; height:100%; min-width:1020px; background:#fff; }
 
#bloc1 			{ clear:both; width:100%; background:purple; }
#bloc1-colG 	{ overflow:hidden; float:left; width:20%; min-width:240px; background:orange; }
#bloc1-colD 	{ overflow:hidden; background:#155; }
 
#bloc1-menu 	{ overflow:hidden; float:right; margin:10px; padding:10px; width:200px; background:green; }
#bloc1-contenu 	{ overflow:hidden; min-width:700px; margin:30px; border:1px solid #111; background:yellow; }
 
#header 		{ clear:both; width:100%; height:50px; background:lightblue; }
#footer 		{ clear:both; width:100%; height:50px; background:lightblue; }
	</style>
 
</head>
<body>
<div id="global">
 
<div id="header">header</div>
 
<!-- bloc1 -->
<div id="bloc1">
	<div id="bloc1-colG">
		<div id="bloc1-menu">
			bloc1-menu
		</div>
	</div>
	<div id="bloc1-colD">
		<div id="bloc1-contenu">
			<p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur
			et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis
			pube tenus amicti.</p>
		</div>
	</div>
</div>
 
<div id="footer">footer</div>
 
</div>
 
</body>
</html>

Merci Candygirl,
Ca donne un résultat TRES satisfaisant pour les LARGEURS, :ccool:
MAIS PAS pour les HAUTEURS :
j'aurais voulu que :
- le footer reste en bas de la fenêtre (si le contenu est insuffisant pour tout remplir) et qu'il descende (si le contenu est trop grand) ;
- le (menu+contenu) fasse la hauteur restante de la fenêtre (s'adapte à la hauteur)

J'entrevois bien une solution en jQuery, mais pas en CSS...
Aurais-tu encore un tuyau ? ;)

Le display-table est justement l'élément nécessaire pour gérer la hauteur. Théoriquement on pourrait faire ce que tu souhaites en full CSS mais, malheureusement on n'obtient pas vraiment le résultat escompté sur IE (8-10) et opera (même en rajoutant un display:table-row intermédiaire là ou je l'ai omis pour passer direct à un display:table). Après j'ai pas trop le temps de tester plus loin ^^

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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 	<title>test</title>
 
	<style type="text/css">
        
                body,html {
                        height:100%;
                        margin:0;padding:0;
                }
        
                #main {
                        display:table;
                        width:100%;
                        height:100%;
                }
                
                #content {
                        width:100%;
                        min-width:960px;
                        display:table;
                        height:100%;
                        min-height:100%;
                }
                 
                #tleft {
                        display:table-cell;
                        width:20%;
                        min-width:260px;
                        background:red;
                }
 
                #tright         {
                        display:table-cell;
                        width:80%;
                        min-width:700px;                        
                        background:green;
                }               
                
                #top,#footer {
                        display:table-row;
                        background:orange;
                        width:100%;
                        height:1px;
                }
        </style>
 
</head>
<body>
<div id="main">
	<div id="top">
		top
	</div>
	<div id="content">
		<div id="tleft">table-cell largeur 20% min 260px</div>
		<div id="tright">table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br></div>
	</div>	
	<div id="footer">
		footer
	</div>
</div>
</body>
</html>

Après, diverses solutions peuvent être envisagées, dérivées des colonnes factices, positionnement absolu si hauteur du footer et header fixe,... suivant le résultat final souhaité.

EDIT: avec le code ci-dessous on y arrive presque, juste que opera et IE ne sont pas capables de répercuter le height du table-cell et prennent le height total=> apparition de la scroll barre :-/

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
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 	<title>test</title>
 
	<style type="text/css">
        
                body,html {
                        height:100%;
                        margin:0;padding:0;
                }
        
                #main {
                        display:table;
                        width:100%;
                        height:100%;
                }
                
                #cell {
                        width:100%;
                        min-width:960px;
                        display:table-cell;
                        height:100%;
                        min-height:100%;
                        background:blue;
                }
                 
                #tleft {
                        display:table-cell;
                        width:20%;
                        min-width:260px;
                        background:red;
                        height:100%;
                }
 
                #table {
                        display:table;
                        height:100%;
                        width:100%;
                }
                
                #tright         {
                        display:table-cell;
                        width:80%;
                        min-width:700px;                        
                        background:green;
                        height:100%;
                }               
                
                #top,#footer,#content {
                        display:table-row;
                        background:orange;
                        width:100%;
                }
                
                #content {height:100%;}
        </style>
 
</head>
<body>
<div id="main">
	<div id="top">
		top
	</div>
	<div id="content">
		<div id="cell">
			<div id="table">
				<div id="tleft">table-cell largeur 20% min 260px</div>
				<div id="tright">table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br>table-cell largeur 80% min 700px<br></div>
			</div>
		</div>
	</div>	
	<div id="footer">
		footer
	</div>
</div>
</body>
</html>

13/09/2011, 17h35
Invité

Ca m'a l'air EXCELLENT tout ça ! :ccool:
Je teste tout de suite !
Merci pour ton aide et le temps passé !

ps : j'en étais juste arrivé au positionnement du footer en bas de page (grâce à la FAQ)
14/09/2011, 10h09
Invité

Explication intéressante ici (pour info) :
-> http://www.w3.org/TR/CSS2/tables.html