Bonjour,
je m'essaye aux divs de largeur variable, et ça me rend fou...
- colonne gauche : largeur "fixe" (20%, mini 240px) ;
- colonne droite : largeur "variable" (largeur restante de la fenêtre, mini 700px).
Quand on réduit la largeur de la fenêtre du navigateur, le contenu passe en dessous du menu.
Code css : 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 <!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"> <!-- 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> </body> </html>
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.
Partager