28173 sujets

CSS et mise en forme, CSS3

[Résolu] Etirement de la hauteur d'un DIV en fonction de son contenu

Bonjour à tous, Smiley smile

Je rencontre un souci (entre autres Smiley lol ) dans la création de la maquette d'une version W3C de mon site.
Je vais essayer d'être le plus clair possible.
En fait, il s'agit d'une différence d'interprétation entre Firefox et IE7.
Lorsqu'on visualise cette page sous IE => http://www.escalopetour.com/Site2/index.php?action=zondi , le DIV s'allonge en fonction du texte.
Cette même page visualisée sous Firefox ne donne pas le même résultat car la hauteur du DIV reste fixe.
Connaissez-vous une solution pour résoudre ce problème ?

Merci d'avance pour votre aide qui me sera très précieuse Smiley cligne


Ps : je suis un autodidacte complet et je suis prêt à écouter toutes remarques constructives pour améliorer ce "début" de maquette, ainsi que le CSS qui y est lié.
Modifié par Ouebma_ETC (26 Dec 2007 - 12:25)
Préambule : Dans ma maquette, j'ai laissé volontairement des bordures de couleurs différentes pour bien voir l'emplacement des différents DIV.
Je vais donc m'appuyer sur ces couleurs pour tenter d'expliquer clairement ce que je veux dire. Smiley murf

Merci pour le lien.
A sa lecture, je viens de faire quelques modifs ... et ... c'est pas vraiment concluant à 100%.
Je m'explique.
Pourquoi, sous Firefox, les DIV vert et violet ne s'allongent pas ?
Modifié par Ouebma_ETC (26 Dec 2007 - 11:28)
Ouebma_ETC a écrit :

Pourquoi, sous Firefox, les DIV vert et violet ne s'allongent pas ?

Correction: div#centre ne s'allonge avec aucun navigateur, à l'exception notable d'Internet Explorer suite à un comportement non standard de ce dernier (voir dans la FAQ la notion de HasLayout).

Le comportement normal, obtenu ici avec Firefox et al., est une conséquence du positionnement flottant.

On pourra lire:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Solution rapide:
div#centre {overflow: hidden;}
(Explication: le contexte de formattage provoqué par le overflow: hidden empêche le dépassement des flottants pour tous les navigateurs modernes, dont IE7. Pour IE6, le HasLayout dû à la propriété width a ici un effet similaire.)
Florent V. a écrit :

Correction: div#centre ne s'allonge avec aucun navigateur, à l'exception notable d'Internet Explorer suite à un comportement non standard de ce dernier (voir dans la FAQ la notion de HasLayout).

Le comportement normal, obtenu ici avec Firefox et al., est une conséquence du positionnement flottant.

On pourra lire:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Solution rapide:
div#centre {overflow: hidden;}
(Explication: le contexte de formattage provoqué par le overflow: hidden empêche le dépassement des flottants pour tous les navigateurs modernes, dont IE7. Pour IE6, le HasLayout dû à la propriété width a ici un effet similaire.)

Merci beaucoup Florent
Smiley cligne
Sujet clos
Aller à