Alignement div IE vs FF

**nano54120** · 31/01/2013, 09h02

Bonjour,

Je me bat pour aligner deux div , que ce soit sur IE ou FF.

Comme d'habitude ça marche sur IE mais grosse galère sur FF.

Voici le code :

Code html :

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

1
2
3
4
5
6
7
<p>
<div style='float:left;max-width:57%;overflow:hidden;margin:5px;'>quel est votre nom : </div>
<div>
<textarea name='OBJ_nom' id='OBJ_nom' style='resize:none;height:2em;width:100%;'></textarea>
</div>
<div style='clear:left;'></div>
</p>";

Ce que je cherche c'est pouvoir afficher l'invite de saisie suivie d'un textarea dynamic qui lui s'affiche à 100% , le tout l'un derrière l'autre sur la même ligne et ce quelque soit la longueur de l'invite.

Ca marche à merveille sur IE mais sur FF l'invite est au dessus du textarea !

**NoSmoking** · 31/01/2013, 19h05

Bonjour,
juste une petite question avant de continuer, quel DOCTYPE utilises tu ?

**nano54120** · 31/01/2013, 21h31

Bonsoir,

Je n'ai rien déclaré ! Est ce grave mon adjudant !!

**NoSmoking** · 31/01/2013, 23h28

Envoyé par nano54120

Je n'ai rien déclaré ! Est ce grave mon adjudant !!

Dès que je le vois je lui demande

, mais pour apporter un élément de réponse si le comportement de IE te paraît plus adéquate, c'est justement parce qu'il n'y a pas de DOCTYPE.

Pourquoi l'ajout d'un doctype casse-t-il mon design ? (suivre les liens)

**Muchos** · 01/02/2013, 05h44

De toute façon, avec une width à 100%, c'est normal que la textarea passe en dessous!

Envoyé par nano54120

Comme d'habitude ça marche sur IE mais grosse galère sur FF.

C'est une blague ou quoi?

**nano54120** · 01/02/2013, 22h23

Envoyé par Muchos

De toute façon, avec une width à 100%, c'est normal que la textarea passe en dessous!

Donc pas de solution !?

C'est une blague ou quoi?

Ben non ! Tout dépend du point de vu que l'on a ! Si tu te mets du côté de IE tu trouve normal que ça fonctionne : je mets un div en float à gauche , il se place à gauche , normal , puis je place un div à la suite en lui demandant de prendre le reste de la place à 100% , normal aussi !

Du côté de FF , je place un div calé à gauche puis un autre que je demande de s'adapter en largeur à 100% .... de la page ! Donc il va en dessous. FF considère que les width à 100% sont relatif à la largeur de la page et rien d'autre.

Tout est donc une histoire de point de vu. Et chacun le fait à sa façon.

Moi je cherche une méthode commune. Il me reste aussi la possibilité de m'adapter à l'explorateur mais ... comment ? J'utilise des div , j'ai essayé une table mais rien de mieux. Mon but est d'afficher un invite suivi d'un textarea qui s'adapte automatiquement en taille pour remplir le reste de la largeur de la page.

J'ai essayé différents DOCTYPE mais rien n'y change.

Avez vous une solution quelque soit l'explorateur ?

**NoSmoking** · 02/02/2013, 00h17

J'ai essayé différents DOCTYPE mais rien n'y change.

S'il n'y en à qu'un a utiliser c'est simplement <!DOCTYPE html>, le bien nommé, ne pas en mettre c'est obtenir n'importe quoi comme on le voit trop souvent sur le net et dans ton exemple.

Concernant le 100% il correspond au 100% du conteneur ce qui devient vite problématique lorsque l'on à plusieurs éléments dans un même conteneur, ou un conteneur sans dimension.

Le CSS permet bien des choses à condition de ne lui demander que ce qu'il sait faire.

Mon but est d'afficher un invite suivi d'un textarea qui s'adapte automatiquement en taille pour remplir le reste de la largeur de la page.

pas sûr que le rendu soit forcément attrayant, il existe des formats à base de FIELDSET, LABEL ou autres.

Néanmoins il existe en CSS la propriété display qui associée à table, table-row ou encore table-cell permet de faire des choses plus simplement.

Un exemple:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Display table, table-row et table-cell]</title>
<meta name="Author" content="NoSmoking">
<style>
.table{
  display:table;
}
.row{
  display:table-row;
}
.cell{
  display:table-cell;
  vertical-align:top;
  white-space:nowrap;
  padding-right:10px;
}
.cell_100{
  width:100%;
}
textarea{
  width:100%;
  resize:none;
}
</style>
</head>
<body>
<div class="table">
  <div class="row">
    <div class="cell">Bonjour vous </div>
    <div class="cell cell_100"><textarea></textarea></div>
  </div>
  <div style="display:table-row;">
    <div class="cell">Merci de laisser votre adresse</div>
    <div class="cell"><textarea></textarea></div>
  </div>
</div>
</body>
</html>

Je ne pense pas que ce soit ce que tu souhaites vraiment mais tu devrais t'en approcher.

**nano54120** · 02/02/2013, 14h25

Excellent travail !

Ca fonctionne à merveille , comme je le souhaite ! Ah le html ! Comment faire des tables sans passer par la fonction table mais en mieux !

A noter : depuis frontpage on ne voit pas le vrai résultat, ça n’interprète pas les codes comme le fait IE. Bon , je peux zapper entre FP et IE ou FF mais que de manip entre l'enregistrement et l'actualisation de la page alors que depuis FP on est plus à l'aise avec juste un onglet à cliquer. J'ai aussi des problèmes quand je veux faire un window.open , c'est refusé depuis FP. Y a t il une solution pour que l'affichage se fasse avec tous les paramètres que l'on a donnés à IE ?

A nouveau mille mercis pour ta réponse, j'ai encore avancé dans ma formation web.

Je précise que j'ai recherché sur Google avant de poser ces questions.

**NoSmoking** · 02/02/2013, 20h28

Excellent travail !

Merci

Quant à ton autre problème celui ci n'ayant rien à voir avec le sujet initial il est préférable d'ouvrir une autre discussion.

N'oublies pas de passer cette discussion en résolue, bouton

**nano54120** · 03/02/2013, 23h53

Ok de toute façon j ai trouvé une solution, je clique sur 'aperçu dans le navigateur'

Alignement div IE vs FF

Positionnement en CSS

Discussions similaires

Partager

Partager