Problème de positionnement d'éléments enfants de la même mère DIV...

Bonsoir à tous,
Je suis face à un problème qui peut être résolu en un claquement de doigts en spécifiant la largeur des div enfants... Je vous explique mon scénario.

Voici une DIV mère qui a une largeur définie, cette DIV a deux éléments enfants dont le premier contient une image <IMG> inséré dans une DIV et le second du texte inséré dans un paragraphe <P>. Je souhaite que ces deux éléments soient côte à côte :
Image | Paragraphe

Je voudrais que la mise en page soit identique quelle que soit la largeur de l'image qui est générée dynamiquement. C'est pourquoi, je ne voudrais pas spécifier de largeur à chacun des éléments enfants. (DIV IMG et P).
J'ai longtemps cherché, je ne trouve pas. J'ai l'impression qu'il est vraiment indispensable de fixer une largeur...
Est-ce quelqu'un a déjà rencontré ce problème et a pu le résoudre ?
Merci d'avance de vos lumières et générosité !
Modifié par I Love N.Y (31 Mar 2007 - 23:30)

Salut,

Désolé, il doit être tard mais je n'ai pas tout compris...
Un petit croquis ou mieux un bout de code en ligne peut être ?

Salut ce que tu peux faire, c'est ne pas mettre de div, ton texte directement dans la div principal et ton image en float. Comme ça ton texte prendra systématiquement la place qui reste. La seule difference que tu auras, je ne sais pas si elle te pose un probléme, c'est que le texte viendra sous l'image si il est plus long que la hauteur de l'image. C'est souvent plutot sympa en plus ça évite les espaces blancs.

Ta composition vat un peu changer, mais c'est le seul moyen que je vois

I Love N.Y a écrit :
Je souhaite que ces deux éléments soient côte à côte :
Image | Paragraphe

Je voudrais que la mise en page soit identique quelle que soit la largeur de l'image qui est générée dynamiquement.

La solution qui va bien : utiliser un contexte de formatage sur le paragraphe pour que l'image flottante repousse le paragraphe.

[b]HTML :[/b]
<div class="conteneur">
	<img class="illustration" alt="" src="monillustration.jpg" />
	<p>Bla bla mon texte.</p>
</div>

[b]CSS :[/b]
div.conteneur {
	width: 480px;
	padding: 5px 10px;
	overflow: auto;
}
div.conteneur img.illustration {
	float: left;
	margin-right: 10px;
}
div.conteneur p {
	overflow: auto;
	/* Pour IE6, de préférence dans une feuille de style de correctifs via un commentaire conditionnel */
	zoom: 1;
}

Les valeurs sont données à titre indicatif.

Le overflow sur div.conteneur sert à éviter des problèmes de dépassement de flottants. Si besoin, voir à ce sujet : Éléments flottants qui dépassent de l'élément parent.

Le overflow sur le paragraphe crée le contexte de formatage.

Ça marchera très bien avec tous les navigateurs récents (dont IE7), mais IE6 est un peu à la ramasse, et il faudra lui adresser un correctif spécifique via un commentaire conditionnel (pour les commentaires conditionnels, voir la FAQ du forum). Concrètement on utilise le HasLayout (via un zoom: 1) pour émuler le contexte de formatage (cf. Avoir le layout - Le concept de hasLayout dans IE/Win).

À noter pour finir que la valeur "auto" de la propriété overflow peut provoquer dans certaines conditions l'apparition de barres de défilement non souhaitées. C'est loin d'être systématique, mais c'est une possibilité. On préfèrera peut-être l'utilisation d'un overflow: hidden.

avec un overflow:auto sur le paragraphe, celui-ci ne passera plus sous l'image au cas ou il est plus long?
Modifié par matmat (01 Apr 2007 - 01:59)

matmat a écrit :
avec un overflow:auto sur le paragraphe, celui-ci ne passera plus sous l'image au cas ou il est plus long?

Oui.

Bonjour à tous,
J'ai manqué de précision, effectivement comme l'a deviné Matmat, je voulais que l'image et le paragraphe soient deux colonnes bien distincts restant à leur place quels que soient le navigateur et la largeur de l'image que je ne connais pas.
J'ai suivi les recommandations de Matmat, visiblement, cela marche bien sous différentes résolutions, navigateurs (IE 7, Firefox 2 et Opéra 9).
Donc pour ceux que cela intérese, suivez le code de Matmat et ajouter le test conditionnel de la façon suivante dans la CSS externe :

<!--[if lt IE 7]>
/* style for IE 6 + IE5.5 + IE5.0  http://www.test.blog-and-blues.org/haslayout/trad_temp.html*/  
.gainlayout { height: 0; }
<![endif]-->
<!--[if IE 7]>
.gainlayout { zoom: 1;}
/* or whatever we might need tomorrow */ 
<![endif]-->

Je n'ai pas complètement compris le test .
Merci à tous.

I Love N.Y a écrit :
J'ai manqué de précision, effectivement comme l'a deviné Matmat, je voulais que l'image et le paragraphe soient deux colonnes bien distincts restant à leur place quels que soient le navigateur et la largeur de l'image que je ne connais pas.

J'avais bien compris cette contrainte, et l'utilisation d'un contexte de formatage permet justement ceci.

I Love N.Y a écrit :
et ajouter le test conditionnel de la façon suivante dans la CSS externe

Ce que tu as fait est faux. Les commentaires conditionnels sont des commentaires HTML, et ne peuvent donc pas être insérés dans une feuille de style CSS.

Relire la FAQ à ce sujet.

De plus, il n'est pas nécessaire de fournir un correctif à IE7. Seules les versions précédentes sont concernées.

Le code à utiliser pour le correctif pourra donc ressembler à ceci :

<!--[if lt IE 7]>
<style type="text/css">
div.conteneur p {zoom: 1;}
</style>
<![ endif]-->

Notes :
1. Code à insérer dans le head, de préférence après l'appel à la feuille de style principale.
2. L'élément style utilisé peut être remplacé par un link appelant une feuille de style contenant le correctif pour les anciennes versions d'IE.
3. Attention : il n'y a normalement pas d'espace dans le [ endif]. J'en ai rajouté une pour éviter que le forum n'interprète ça comme un appel à une image.
Modifié par Florent V. (01 Apr 2007 - 15:54)