Div de la taille restante [Résolu]

sp2308 · 15/09/2011, 22h46

Bonjour

J ai 3 div float:left.

J affiche ou masque la plus à gauche, de taille fixe, la suivante est aussi de taille fixe.

J aimerais que la 3eme, la plus à droite donc, prenne la place restante en largeur soit courte quand les 3 div sont affichées soit plus longue quand seules les deux dernieres div sont affichees.

Comment proceder ?

Merci pour votre aide.

NoSmoking · 16/09/2011, 01h07

Bonsoir,
il faut jouer avec la position des DIV l'une par rapport aux autres

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
html, body {
  width : 100%;
  height : 100%;
  margin : 0;
  padding :0;
}
#div_gauche {
  float : left;
  width : 200px;
  height : 100%;
  background-color : #ffe0e0;
}
#div_centre {
  float : left;
  width : 200px;
  height : 100%;
  background-color : #e0ffe0;
}
#div_droite {
  height : 100%;
  background-color : #e0e0ff;
}
</style>
</head>
<body>
<div id="div_droite">
  <div id="div_gauche">DIV de Gauche</div>
  <div id="div_centre">DIV du Centre</div>
  DIV de Droite
  <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
  <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
</div>
</body>
</html>

fais des essais en masquant les DIV centre et/ou gauche

sp2308 · 16/09/2011, 09h15

Je te remercie, c est exactement ce que je recherchais.

Par contre IE9 a un affichage bien particulier.

Quand div gauche disparait, div centre prend sa place et div droite glisse sur la gauche.Normal !Sauf... que le texte dans div droite reste affiché à sa position initiale et s affiche aussi comme il doit le faire, c est à dire decalé à gauche!!! Sur chrome et firefox, aucun pb!

Quand j essaie de selectionner ce texte qui ne devrait pas y etre avec le boutton droit de la sourris, il disparait pour ne laisser sa place qu'au texte nouvellement repositionné !!!!

Pour palier à cela, je masque et affiche à nouveau le contenu de la div droite.

Voici mon code :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
html, body {
  width : 100%;
  height : 100%;
  margin : 0;
  padding :0;
}
#div_gauche {
  float : left;
  width : 200px;
  height : 100%;
  background-color : #ffe0e0;
}
#div_centre {
  float : left;
  width : 200px;
  height : 100%;
  background-color : #e0ffe0;
}
#div_droite {
  height : 100%;
  background-color : #e0e0ff;
}
#login {
	float:right;
 
}
#barre {
	height:50px;
	background-color:aqua;
}
</style>
 
<script type="text/javascript">
function voirOnglet(id)
	{ 
	if(document.getElementById('div_gauche').style.display =='none')
		{
		document.getElementById('div_gauche').style.display = 'block';
		} 
		else
		{
		document.getElementById('div_gauche').style.display ='none'
		document.getElementById('barre').style.display ='none'
		document.getElementById('barre').style.display = 'block';
		}
}
</script>
 
</head>
<body>
<div id="div_droite">
  <div id="div_gauche" >DIV de Gauche</div>
  <div id="div_centre"  onclick="voirOnglet('div_gauche');">DIV du Centre</div>
  <div id="barre">du blabla dans la barre<div id="login">login</div></div>
 </div>
</body>
</html>

merci

stephane

jreaux62 · 16/09/2011, 15h10

Bonjour,
ce serait plus clair avec des copies d'écran...

15/09/2011, 22h46	#1
sp2308 Membre régulier Inscription : décembre 2007 Messages : 283 Détails du profil Informations forums : Inscription : décembre 2007 Messages : 283 Points : 94 Points : 94	Div de la taille restante Bonjour J ai 3 div float:left. J affiche ou masque la plus à gauche, de taille fixe, la suivante est aussi de taille fixe. J aimerais que la 3eme, la plus à droite donc, prenne la place restante en largeur soit courte quand les 3 div sont affichées soit plus longue quand seules les deux dernieres div sont affichees. Comment proceder ? Merci pour votre aide.
	00

16/09/2011, 15h10	#4
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, ce serait plus clair avec des copies d'écran... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email