2 images en float left par rapport à un texte [résolu]

Bonjour.

Je cherche à faire ça :


Et bien sûr je souhaiterais que cettes mise en forme reste quand on agrandit le texte.
Ici mes cadres gris représentent des images et je voudrais les mattre les 2 en float left. Pour cela je pensais à un code du style :

<img src="image.jpg" id="image1"/>
<img src="image.jpg" id="image2" />
<p> fdhkdjgh jkfgh gkjfdhf gjkg hjkfgh jgk ghjghkjgjui sfndhkud fhjghjfd ghj gfhjg fhjghj jkg hgkdj</p>

#image1 {
float:left;
}

#image2 {
clear:left; *
float:left;
}

p {
float:left
}

*avec ce clear:left qui ne s'applique qu'à image2 en non pas à p. Ce qui fais que les deux images sont en float:left par rapport au texte mais pas entre elles.
Seulement voilà, cette solution ne semble pas possible... Je voulais donc savoir si il en existait une autre pour pouvoir réaliser se genre de mise en page ?

Merci d'avance pour votre aide.
Modifié par mathmax (28 Nov 2005 - 21:29)

Pour bien comprendre,
que ce passe-t-il avec ce code lorsque tu agrandis le texte ?

Marc

En fait ce code ne peux pas marcher. Il va logiquement afficher dans l'ordre :
la première image, la deuxième en dessous à cause du clear:left et le texte à droite de la deuxième image (et se prolongeant eventuellement en desous si besoin est). Mais malheureusement ce n'est pas ce que je souhaite obtennir. Je veux que le texte soit à droite des 2 images. J'ai essayé dans tous les sens avec des float:left, float:right, de me servir de div avec layout... mais rien y fait... je me demande tout simplement si une telle chôse est possible en CSS2.
Enfin si vous avez une idée je suis preneur.

D'ailleurs, je me demande comment faire ça :

c'est à dire faire qu'une image puisse flotter en bas à gauche (ou à droite) d'un cadre de texte. Ca serait un premier pas pour pouvoir réaliser la mise en page de dessus je pense.
Attention : je veux faire un seul bloc de texte. car je veux qu'en agrandissant la police, l'allignement en bas reste correct.
Une idée ?
Modifié par mathmax (12 Nov 2005 - 18:34)

Je suis pas bien sûr de comprendre.
Pour moi un bloc, et ici en l'occurence, un bloc texte, a une hauteur et une largeur et c'est un rectangle.
De fait, il me semble qu'un bloc seul ne pourra effectivement jamais prendre la forme de ton texte.
Cela reviendrait à faire 2 ou 3 blocs de texte pour le premier dessin et 3 blocs pour le second. Un problème survient, je suis d'accord, dans ce cas, si tu décides d'agrandir la police.
Dans ce cas là, ça ressemble pour moi à un problème de guru. Du genre il faudrait :
1- deviner la taille des caractères coté client (javascript ?) ,
2- envoyer au serveur l'info si l'utilisateur change la taille des caractères,
3- répartir astucieusement les caractères (via php) dans les blocs en tenant compte de la nouvelle taille.
4- rafraichir le navigateur.

Bon je dis ca pour le plaisir de lancer une idée mais ça me semble un peu farfelu de l'utiliser.

Donc pour moi, la chose me semble impossible ou infaisable en CSS2.

--
Marc

Ouf, je m'aperçois qu'en enlevant la propriétée float:left à p, mon code çi dessus fonctionne ! C'est plutôt normal car on le dispense ainsi du layout... cependant, je ne comprends pas trop pourquoi le texte se retrouve en flottant par rapport à la deuxième image. Comme la 2ème possède la propriétée clear, le paragraphe qui se trouve après devrait lui aussi être en clear: left par rapport à la première image et devrait donc se trouver à droite de la deuxième image, non ?

Par contre, je ne vois toujours pas comment faire pour faire qu'un bloc float en bas à gauche d'un autre bloc... La solution dynamique me parait un peu compliqué pour un simple bout de mise en page. D'autant plus que je ne maitrise pas encore les langages serveurs...
Une idée en CSS ?
Modifié par mathmax (13 Nov 2005 - 15:54)