2 Divs, dont une à largeur variable

Invité · 13/09/2011, 11h17

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).

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>

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.

2 Divs, dont une à largeur variable

Dimensionnement en CSS

Mode arborescent

Discussions similaires

Partager

Partager