Fixer 3 div séparées par une qui stretch en fonction de l'écran

**dominos** · 16/03/2011, 20h55

Bonsoir,

L'illustration ci-dessus représente le comportement d'une barre placée en haut d'une page. Selon la taille de la fenêtre, c'est la div B qui s'étire, les autres sont fixes.

J'ai essayé plusieurs solutions mais sans résultat, le soucis c'est que les 2 div de droite viennent cacher la première div si la taille de l'écran est inférieur à la taille total de la div A + C + D.

Pas facile de fixer 3 div...

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
div.Bar {
  margin-top: 150px;
  height: 80px;
}
 
div.A {
	background-color: gray;
	height: inherit;
	position: absolute;
	width: 340px;
	left: 0px;
 
}
 
div.B {
	background-color: orange;
	height: inherit;
	position: absolute;
	right: 426px;
	left: 340px;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;
}
 
div.C {
	background-color: #aaeaea;
	position: absolute;
	width: 56px;
	right: 370px;
	height: inherit;
} 
 
div.D {
	background-color: aqua;
	position: absolute;
	width: 370px;
	right: 0px;
	height: inherit;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="Bar"><div class="A"></div><div class="B"></div><div class="C"></div><div class="D"></div></div>

En vous remerciant d'avance pour vos réponses.

**Patrice.H** · 17/03/2011, 09h13

Bonjour,

je ne suis pas sur de comprendre le problème: tu veux éviter l'empilement des divs lorsque la largeur de ta barre < la largeur A+C+D?

Si c'est le cas essaye tout simplement en mettant une largeur minimum à ton div englobant, ainsi il y aura toujours la place pour tes divs A, C et D...

Dans le cas présent:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
A+C+D
340 + 370 + 56 = 766px

Donc:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
div.Bar {
  margin-top: 150px;
  height: 80px;
  min-width:770px;
}

Tiens nous au courant.

**Bisûnûrs** · 17/03/2011, 09h50

Au passage, tu peux aussi te passer du positionnement absolu à l'aide d'éléments flottants (et aussi la largeur minimum comme le préconise Patrice.H).
Ca implique juste une petite modification au niveau HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="Bar"><div class="A">A</div><div class="D">D</div><div class="C">C</div><div class="B"></div></div>

Et le CSS :

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
div.Bar {
  margin-top: 150px;
  height: 80px;
  min-width:770px;
}
 
div.A {
  background-color: gray;
  height: inherit;
  float:left;
  width: 340px;	
}
 
div.B {
  background-color: orange;
  height: inherit;
  border-right: 3px dashed yellow;
  border-left: 3px dashed yellow;
  margin-left:340px;
  margin-right:426px;
}
 
div.C {
  background-color: #aaeaea;
  width: 56px;
  height: inherit;
  float:right;
} 
 
div.D {
  background-color: aqua;
  float:right;
  width: 370px;
  height: inherit;
}

Attention juste au Three Pixel Jog sur IE6 avec cette méthode ..

**dominos** · 17/03/2011, 10h35

Merci, c'est exactement de que je cherche à faire, sauf que ce code ne fonctionne pas sous IE, les div s'empile les unes sur les autres...

**Bisûnûrs** · 17/03/2011, 10h45

Heu, tu réponds à qui ?

De quelle version de IE tu parles (il y en a maintenant 4 différentes sur le marché ..) ? Tu as bien un DOCTYPE valide ? Tu as un exemple en ligne de ton résultat ?

**dominos** · 17/03/2011, 11h02

Envoyé par Bisûnûrs

Heu, tu réponds à qui ?

De quelle version de IE tu parles (il y en a maintenant 4 différentes sur le marché ..) ? Tu as bien un DOCTYPE valide ? Tu as un exemple en ligne de ton résultat ?

Merci c'est pour vous deux, sinon j'ai testé ton code et il fonctionne très sur Firefox/Safari/Opera.., mais sous ie8/7/6/5 ça donne ça :

**adiGuba** · 17/03/2011, 11h07

Salut,

min-width n'est supporté qu'à partir d'IE7...

Sinon pour la première solution (avec les position absolute), il manquerait une position:relative dans le style de div.Bar (pour que les div A,B,C et D soit placé selon div.Bar et non pas selon la page) et éventuellement un overflow:hidden (ou [B]auto) selon ce qu'on veut faire du contenu de B lorsqu'il est trop petit...

a++

**Bisûnûrs** · 17/03/2011, 11h10

Il faut savoir que min-width n'est disponible qu'à partir de IE7, d'une part.
D'autre part, la valeur inherit pour la propriété height n'est pas fonctionnelle pour les versions antérieures à la 8.

Quoi qu'il en soit, je n'ai pas ton problème avec IE7 (sauf la hauteur des divs) ni avec IE8.

Pourrais-tu mettre tes codes HTML et CSS complets ?

**dominos** · 17/03/2011, 11h41

Voila le code mais c'est plus le même que au début, celui-ci fonctionne plutôt bien mais ça bug sous ie6/5. De plus il y a un second pb avec ce code c'est que si je place une image avec un width=350 dans la div D ça block bien la div D à 370, sauf que c'est pas une image qu'il faut ici mais du texte d'ou la présence de la classe "Present".

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
/* ==== TEST =========== */
div.Bar {
 
  height: 80px;
  padding-top: 150px;
  position: relative;
}
 
div.A {
	/*background: url("../img/topBar.png");
	background-repeat: repeat-x;*/	
	background-color: gray;
	height: inherit;
	position: absolute;
	width: 370px;
	left: 0px;
}
 
div.B {
	/*background: url("../img/topBar.png");
	background-repeat: repeat-x;*/	
	background-color: orange;
	height: inherit;
	position: absolute;
	right: 426px;
	left: 370px;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;
}
 
div.C {
	background-color: #aaeaea;
	position: absolute;
	left: 375px;
    text-align: right;
	right: 370px;
	height: inherit;
} 
 
div.D {
	/* Compatibilté <IE7 => Format (.gif) car contient une zone de transparence */
	/*background: url("../img/topBarPresent.gif");
	background-repeat: repeat-x;*/	
	background-color: aqua;
	position: absolute;
	right: 0px;
	left: 370px;
	height: inherit;
text-align: right;
}
 
div.Present {
	right:0px; 
	width: 350px;
	height: 80px;
}
 
/* ==== FIN TEST =========== */

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="Bar">
 <div class="A"><a href="..."><img src="public/images/logo.png"></a></div>
 <div class="D">
  <div class="Present">
   <span class="title">Titre</span>
   <br />Ici texte sur plusieurs lignes qui doit rester fixe.. 
  </div>
 </div>
 <div class="C"><img src="public/styles/img/topBarSeparator.gif"></div>
 <div class="B"></div>
</div>

Envoyé par adiGuba

il manquerait une position:relative dans le style de div.Bar (pour que les div A,B,C et D soit placé selon div.Bar et non pas selon la page)

Merci pour cette précision.

**dominos** · 18/03/2011, 13h38

Bonjour, voila une solution qui semble fonctionner sous IE8/7, Firefox, Safari, Chrome, Opéra, Netscape mais curieusement pas sur IE6, si vous avez une idée ça serait super simpa !

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
div.Bar {
  height: 80px;
  margin-top: 150px;
  position:relative;
  width: 100%;
}
 
div.A {
	background-color: gray;
	height: 80px;
	position: absolute;
	width: 370px;
	left: 0px;
}
 
div.B {
	background-color: orange;
	height: 80px;
	position: absolute;
	left: 380px;
	right: 426px;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;
}
 
div.C {
	background-color: #aaeaea;
	position: absolute;
	left: 375px;
    text-align: right;
	right: 370px;
	height: 80px;
} 
 
div.D {
	background-color: aqua;
	position: absolute;
	right: 0px;
	left: 370px;
	height: 80px;
	text-align: right;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="Bar">
 <div class="A"></div>
 <div class="D">
 <img src="public/styles/img/test.png" width="370" height="80"></img>
 </div>
 <div class="C"><img src="public/styles/img/topBarSeparator.gif" width="56" height="80"></div>
 <div class="B"></div>
</div>

Merci encore.

**Patrice.H** · 18/03/2011, 14h29

Ça va peut être passer pour du troll mais la solution la plus appropriée pour moi c'est:

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
  <!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>Vous utilisez un navigateur dépassé depuis près de 8 ans!</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>Pour une meilleure expérience web, prenez le temps de mettre votre navigateur à jour.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://fr.www.mozilla.com/fr/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=fr' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/fr/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome?hl=fr' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->

Au bout d'un moment faut plus s'embêter hein

**dominos** · 18/03/2011, 14h54

Bonjour, c'est marrant j'ai été il y a pas longtemps dans un organisme, il tournait encore sous IE6 parce le service informatique n'effectuait pas les mises à jour et les téléchargements étaient bloqués

sisi ça existe... bref c'est plutôt la solution que je cherche.

En fait j'ai remarqué que la combinaison position:absolute;left:..;right; ne semble pas être reconnu par ie6, la div disparait, autre pb apparent la barre ne prend pas en charge width:100%.

**Patrice.H** · 18/03/2011, 15h33

Pour le width:100%; je ne sais pas mais pour l'alignement tu peux peut être essayer float:left; et float:right; ?

**dominos** · 18/03/2011, 15h36

Merci mais si tu reprends la première explication, ça provoque un retour chariot des éléments.

**Candygirl** · 18/03/2011, 16h54

Hello,

tu peux utiliser un display:table-cell pour obtenir l'effet souhaité:

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
.Bar {
  margin-top: 150px;
  height: 80px;
  display:table;
  width:100%;
}
 
.A {
	background-color: gray;
	display:table-cell;
	width:340px; /* utile que pour IE 6 et 7 */
	min-width: 340px;
}
 
.B {
	background-color: orange;
	display:table-cell;
	width:100%;
	border-right: 3px dashed yellow;
	border-left: 3px dashed yellow;	
}
 
.C {
	background-color: #aaeaea;
	display:table-cell;
	width:56px;
	min-width: 56px;	
} 
 
.D {
	background-color: aqua;
	display:table-cell;
	width:370px;
	min-width: 370px;	
}

Avec un css palliatif avec expression pour les vieux navigateurs IE6/7

Code html :

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
<!--[if lt IE 8]>
		<style type="text/css">
 
		.A,.B,.C,.D {
			float:left;
			height:100%;
		}
 
		.B {
			width:300px;
			width:expression(this.parentNode.offsetWidth-772+"px");
		}
 
		.Bar {
			min-width:850px;
		}
		</style>
<![endif]-->

Évidement, sur IE6 et 7 tu vas te retrouver avec les blocs qui passent les uns au-dessous quand tu rétrécis la fenêtre...

Autrement pour éviter la problématique que tu évoques avec la solution de Bisûnûrs, tu peux fixer un min-width à .Bar, de 772+un minimum pour ton div.B. Par exemple, 850px.

**dominos** · 18/03/2011, 18h44

Salut,

Merci pour ta recherche, ton exemple m'aide à voir aussi comment d'autres développeurs traitent ce problème, mais tu utilises javascript

...

Autrement pour éviter la problématique que tu évoques avec la solution de Bisûnûrs, tu peux fixer un min-width à .Bar, de 772+un minimum pour ton div.B. Par exemple, 850px.

Peux-tu être plus précise stp, parce que j'ai placé min-width:772 dans la classe .Bar et 850px dans B de cet exemple, se qui fait planter IE6, B est décalé sous IE7 mais fonctionne sous IE8

**Candygirl** · 18/03/2011, 20h56

Oui, j'utilise j'avacript mais que pour 2 vieux navigateurs obsolète destinés à disparaître (et le plus vite sera le mieux ;p).

De toute façon, ça va être dur de faire sans pour IE6 vu qu'il ne connaît pas le min-width. Je pensais à qqch du genre (sur IE6, le min-width n'est pas pris en compte):

Code html :

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
64
65
<style type="text/css">
.Bar {
  margin-top: 150px;
  min-height: 80px;
  min-width:850px;
}
 
.A,.B,.C,.D {min-height:80px;}
 
.A {
        background-color: gray;
        float:left;
        width:340px;
}
 
.B {
        background-color: orange;
        overflow:auto;
        border-right: 3px dashed yellow;
        border-left: 3px dashed yellow;
}
 
.C {
        background-color: #aaeaea;
        float:right;
        width:56px;
} 
 
.D {
        background-color: aqua;
        float:right;
        width:370px;
}
 
 
 
</style>
 
<!--[if lt IE 7]>
		<style type="text/css">
 
		.Bar.A,.B,.C,.D {
			height:80px;
		}
 
		.B{  /* 3px jog fix */
		  position:relative;
		  left:-3px;
		}
 
		.C {
			margin-left:-6px;
		}
 
		</style>
<![endif]-->
 
</head>
<body>
<div class="Bar">
	<div class="A">A</div>
	<div class="D">D</div>
	<div class="C">C</div>
	<div class="B">B</div>	
</div>

**dominos** · 19/03/2011, 15h41

Merci encore à vous tous, après tout ça on comprend qu'il n'est pas possible descendre en dessous de IE7, j'ai donc opté pour une solution un peu bricolage, mais quand il n'y a pas d'autre solution, faut faire avec...

La solution ci-dessous fonctionne donc avec tous les navigateurs et IE, à partir de IE5.0

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
table.topBar {
	border: 0px;
	margin-top: 30px;
	width: 100%;
	height: 80px;
}
 
td.A {
	background-color: gray;
	width: 370px;
}
 
td.B {
	background-color: orange;
	border-left: 1px dashed yellow;
	border-right: 1px dashed yellow;
	width: 100%;
}
 
td.C {
	background-color: #aaeaea;
	width: 56px;
}
 
td.D {
	background-color: aqua;
	width: 370px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table class="topBar" cellpadding="0" cellspacing="0" >
 <tr>
  <td class="A"><img src="370.gif"></td>
  <td class="B"></td>
  <td class="C"><img src="56.gif"></td>
  <td class="D"><img src="370.gif"></td>
 </tr>
</table>

Encore merci.

Fixer 3 div séparées par une qui stretch en fonction de l'écran

CSS

Discussions similaires

Partager

Partager