Positionnement DIV de taille variable

**ferensy** · 08/02/2008, 17h09

Bonjour à tous,

J'ai cherché dans le forum mais pas trouvé exactement mon problème...
Je débute en Css et j'aimerai positionner deux DIV suivant leur contenu.

Je m'explique :
- une DIV parente de taille fixe contient deux DIV :
- La première (A) est de taille fixe aussi, et alignée à gauche.
- Le deuxième (B) est de taille variable, et alignée à droite.

J'aimerai que si la taille de (B) augmente, elle passe sous (A). Avec ce que j'ai fait, ca marche sous Firefox, mais pas sous IE. Sous IE, (B) augmente en hauteur et reste au niveau de (A).

Comment faire si cela est possible pour avoir le comportement voulu sous les deux navigateurs ?

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
 
<html>
<head>
<style type="text/css">
div.parent {
   width:400;
   height:50;
   border: 1px solid red;
   display:block;
}
 
div.droite {
  float:right;
  height:20;
  display: inline;
  border: 1px solid blue;
}
 
div.gauche {
  float:left;
  height:20;
  display: inline;
  border: 1px solid green;
}
</style>
</head>
 
<body>
<div class="parent">
  <div class="gauche">test gauche, test gauche, test gauche</div>
  <div class="droite">test droite, test droite , test droite</div>
</div>
 
</body>
</html>

PS : je fais mes tests dans la page suivante : http://www.w3schools.com/css/tryit.a...trycss_display

Merci à vous !

**ferensy** · 11/02/2008, 09h36

Bon en recherchant le pourquoi du comment, il semblerait que IE et Firefox ne traite pas les div flottants à largeur variable de la même manière.

Est ce que quelqu'un a une idée pour avoir le rendu de Firefox (si div trop grand, passe en dessous) sous IE ? Le mieux ce serait une solution purement CSS, mais si y'a pas toute solution est la bienvenue

Merci à vous pour vos réponses !

**PuppeT mAsTer** · 11/02/2008, 15h06

Dans ce cas, il faut faire en sorte que ton site appel une css différente selon que l'utilisateur utilise IE ou un Firefox.

**ferensy** · 11/02/2008, 16h17

Arf ... c'est bien ce que je craignais .... ca va faire mal

Bon si personne n'a d'autre idée je me lance la dessus !

En tout cas merci pour ta réponse.

**Xann_71** · 11/02/2008, 16h43

Salut!
Ben écoute j'ai voulu tester ton code et tenter de corriger ton problème.

Au début comme tu dis, les 2 navigateurs affichaient différemment la page (problème fréquent malheureusement du fait de l'interprétation différente des navigateurs).

J'ai ensuite modifier plusieurs détails et j'ai réussi à obtenir quelque chose qui pouvait t'intéresser.

Mais quand j'ai voulu vérifier les modifications qui étaient utiles, j'ai remis petit à petit tes infos et au final, alors que je crois avoir le même code que toi de nouveau, ben les éléments s'affichent comme tu voulais

donc voila le code que j'ai.Regarde si tu vois ce que j'ai changé mais moi je retrouve plus

.

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
 
 
<html>
<head>
<style type="text/css">
 
div.parent {
   width: 400px;
   height: 50px;
   border: 1px solid red;
   display: block;
}
 
div.gauche {
  float: letf;
  height: 20;
  display: inline;
  border: 1px solid green;
}
 
div.droite {
  float: right;
  height: 20;
  display: inline;
  border: 1px solid blue;
}
</style>
</head>
 
<body>
<div class="parent">
  <div class="gauche">test gauche, test gauche, test gauche</div>
  <div class="droite">test droite, test droite , test droite</div>
</div>
 
</body>
</html>

**Xann_71** · 11/02/2008, 16h53

J'ai trouvé mon erreur (ou peut être ta solution tout dépend comment tu veux l'interpréter^^).

En fait en réécrivant ton code (après l'avoir modifié) je me suis trompé en saisissant le float: left; du div gauche (j'ai écrit float: letf

Donc a priori, si tu enlève le float: left; de ton div gauche, tu devrais obtenir ce que tu veux

**ferensy** · 11/02/2008, 17h49

Impec !

En effet, si j'enleve le float:left sur le DIV de gauche ca marche super avec les deux navigateurs !

En tout cas merci beaucoup pour votre aide !

Positionnement DIV de taille variable

Positionnement en CSS

Discussions similaires

Partager

Partager