[Résolu] Img qui étend une div verticalement

Bonjour,

J'ai bien cherché dans ce forum, mais sans succès.

Convaincu par l'utilisation d'un HTML sémantique + CSS après de nombreuses lectures, dont ce super site, je débute et me heurte à un problème (enfin, quand je dis "un" ).

J'ai une balise <div> avec dedans une balise <img>. En CSS, j'ai mis mon image en float: left. Le texte se met bien sur la droite, nickel.

Problème : quand l'image est trop grande par rapport au texte qui l'accompagne, la couleur de fond du div s'arrête brutalement, et pire, le <div> suivant commence sous l'image... Beurk...

Je viens de chercher sur le net toute la soirée, de même que sur l'excellent livre de Meyer, rien n'y fait.

Le mieux que j'ai trouvé consiste à mettre le <div> en hight 100%. Sur IE, ça à l'air pas mal, mais sous FF, rien à faire...

Je m'en remets donc à vous pour la première fois, en espérant que mon problème ne soit pas vain !

Amicalement,
@++, Stef.
Modifié par StefU2 (30 Jan 2007 - 23:25)

Salut,

Comme tu peux comprendre, il serait profitable pour toi que tu nous montre une page en ligne ou au minimum le code de la dite page (mais la page en ligne c'est mieux), pour que l'on puisse mieux se rendre compte du problème et t'aiguiller en conséquence

Salut,

C'est un problème de contexte de formatage :

http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

Tu mets comme style à ton <div>

div {
overflow:hidden;
}

Et ça roule, sauf pour IE inférieur à IE7. Pour ça commentaire conditionnel en plus :

<!--[if lt IE 7]>
<style type="text/css">
     div {
     zoom:1;
     }
</style>
<![ endif]--><!-- Attention à enlever l'espace après le crochet ouvrant [b] [  [/b] -->

A mon avis c'est plutot le comportement normal du float, c'est dire qu'il est retiré du flux normal, donc... le flux continu son chemin malgrés la taille de celui-ci. Quand tu as un div qui contient un flottant, celui ne prend pas la taille du flottant (sauf sous ie6). Tu as différentes solutions:

- mettre un <div style="clear:left"></div> (tu peux rajouter: line-height:1px;font-size:1px;height:0px si tuveux qu'il prenne un minimum d'espace) le clear étant une propriété qui permet de se placer sous le flottant. Donc comme ton élément est sous le flottant ta boite s'adapte au contenu.

Le probléme c'est que ce petit div peut dans certains cas aller ce placer sous un autre élément flottant de la page, ça c'est un autre histoire de relation parents/enfants entre flottants.

- autre solution c'est de mettre ta boite parent en flottant également. Un flottant s'adapte a la taille d'un autre flottant enfant. Cette solution marche uniquement dans des cas bien précis, tu t'apercevras de son effet en essayant

- une troisiéme solution est de mettre display:table a l'élement parent mais là tu t'expose à d'autres problémes donc je te conseil pas.

- il me semble que overflow:auto marche également dans certain cas mais je n'ai pas plus d'info que ça, et je ne sais pas si c'est trés recomandé.

C'est un vaste probléme qui n'a pas de solution bien franche. A toi de voir celle qui s'adapte le mieux à ton cas.
Modifié par matmat (25 Jan 2007 - 01:27)

Merci de votre aide !

Je suis désolé de n'avoir pas mis l'exemple en ligne. Je travaille en local pour l'instant. Je vais essayer vos solutions et je vous tiens bien vite au courant.

Quoi qu'il arrive, je vous tiens au courant.

Merci encore,
Stef.

[EDIT:] Ca marche sur FF et IE7 avec l'overflow !!!! Je testerai avec IE6 que je n'ai plus sur ce poste et je vous dirai également. En tout cas, merci beaucoup encore une fois !!!
Modifié par StefU2 (25 Jan 2007 - 11:44)

matmat a écrit :
Quand tu as un div qui contient un flottant, celui ne prend pas la taille du flottant (sauf sous ie6).

C'est le cas même sous Internet Explorer Windows. Les flottants ne repoussent pas les limites des blocs, uniquement leur contenu (texte, images).

L'exception avec Internet Explorer, c'est si le bloc conteneur est doté du layout, par exemple s'il a une largeur ou une hauteur spécifiée.

Plus d'infos :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

matmat a écrit :
il me semble que overflow:auto marche également dans certain cas mais je n'ai pas plus d'info que ça, et je ne sais pas si c'est trés recomandé.

C'est une des deux solutions les plus intéressantes :
- overflow: auto|hidden sur le conteneur ;
- clear: left|right|both sur un élément situé après le flottant, dans le conteneur.

a écrit :
C'est une des deux solutions les plus intéressantes :
- overflow: auto|hidden sur le conteneur ;

que ce que vaut exactement cette solution au regard des spécification de cette propriété par le w3c? Est ce réellement une solution qui est censée marcher sur les navigateurs valides ou est ce qu'elle marche par chance? Il me semble (quand j'avais essayé) que ça ne marche pas bien sur ie6, mais ça c'est pas grave. Ou peut-on trouver plus d'info sur ce sujet. Cela semble une solution tellement simple a un probléme tellement fréquent, que j'ai du mal a croire que ce soit la bonne solution vu que peu de dévelopeur l'appliquent.

matmat a écrit :
Est ce réellement une solution qui est censée marcher sur les navigateurs valides ou est ce qu'elle marche par chance?

Il me semble que le l'article de Blog & Blues pointé par clb56 est plutôt clair à ce sujet.

matmat a écrit :

Cela semble une solution tellement simple a un probléme tellement fréquent, que j'ai du mal a croire que ce soit la bonne solution vu que peu de dévelopeur l'appliquent.

Ce qui en dit long sur les développeurs

aaahh ok merci beaucoup! et la lumiére fut, en fait overflow auto permet d'éviter que clear s'aplique à d'autre élements de la page, mais il faut quand même mettre clear, ai je bien compris?
Effectivement ça marche a tout les coups! merci à ce super forum qu'est Alsacréations!
Modifié par matmat (25 Jan 2007 - 17:13)

Salut Mat,

matmat a écrit :
mais il faut quand même mettre clear, ai je bien compris?

Non : la hauteur d'un conteneur peut s'étendre en prenant en compte ses flottants si l'on crée un contexte de mise en forme bloc (par exemple avec la propriété overflow) et par conséquent il n'y a pas besoin d'utiliser en plus clear .
Tu peux voir quelques exemples ici.

Pour obtenir un effet similaire avec Internet Explorer, il faut activer le hasLayout : overflow (visible ou hidden) le permet dans le cas d'IE7, mais pas d'IE 5 et 6. Il faut pour eux recourir à une autre propriété : le plus souvent une largeur, un hauteur (exemple : height:1%) ou zoom:1.
Modifié par Alan (25 Jan 2007 - 20:45)

Bonsoir !

Désolé pour le délai. J'avais promis de revenir vers vous pour vous dire le résultat : et bien vous êtes géniaux ! overflow: auto m'a tout simplement sauvé !

J'ai testé sous FF, MSIE 6, 7, Safari sur un Mac : c'est nickel.

Merci beaucoup !
@++, Stef.