Paragraphe, image et div

Bonjour,

Je bute sur une mise en page un peu tordu et je n'ai pas encore trouver de solution viable. Un exemple vaudra surement mieux qu'un long texte, donc voici ce que je souhaite obtenir comme résultat.

http://img703.imageshack.us/img703/8530/89288041.gif

Sachant que l'image aura une largeur toujours égale, mais sa hauteur peut varier d'un article à l'autre. Ce qui m'empêche de jouer avec les positions sur la div. La div, elle aussi à une largeur fixe. Le paragraphe, lui, ne peut être scindé en deux.

J'ai fait plusieurs essais, mais sans succès.. C'est pourquoi, je fais appel à vous

Merci,
mob.
Modifié par mob (12 Jan 2011 - 10:36)

Bonjour,

Normalement en faisant flotter les deux éléments de droite (en prennant bien soin de déclarer un clear sur le div pour qu'il aille à la ligne) et en laissant le <p> dans le flux, il devrait s'ajuster comme sur ton schéma. À tester.

Eh bah, çà fonctionne ^^ Il fallait pas que je laisse l'image à l'intérieur du paragraphe, çà change tout ! Les floats passent nikel du coup (avec le clear au bon endroit).

Merci !

Pas si résolu que çà finalement. Ca se comporte bien comme sur l'exemple sous Chrome, Firefox & co, même IE8 mais malheureusement pas sur IE7..

Voilà ce que donne le code en gros :

<div>
	<img class="float_right" width="" height="" src="" alt="" />
					
	<div class="float_right both_clear">
		Lorem ipsum.
	</div>
					
	<p>
		Lorem ipsum dolor sit amet.
	</p>
</div>

Les class float_right et both_clear sont explicites. Concernant <p>, je lui ai juste attribué une largeur fixe pour qu'il ne passe pas sous la DIV.

Sous IE7 donc, le texte débute au niveau de la DIV et non de l'image. J'imagine que c'est dû au clear:both; de la DIV mais je ne trouve pas de solution...
Modifié par mob (12 Jan 2011 - 10:58)

J'suis toujours bloqué là-dessus.. Pas d'idée ? Ou piste ?

Personnellement, je dégraderais le rendu pour IE7 et inférieurs en laissant le bloc jaune ne pas faire le coin (en lui attribuant une largeur via un commentaire conditionnel).

C'est ce que j'ai proposé, mais c'est pour un très gros client.. Du coup c'est encore plus difficile à faire comprendre

Mais je crois que je vais insister !

Merci Laurie-Anne en tout cas.

Désolé, je n’ai pas pris le temps de tester. Alors je pose la question : sous IE7, c’est un problème avec le texte dans le P que tu as un problème ou avec la boite formée par le P ?
Modifié par hibou57 (17 Jan 2011 - 15:01)

C'est la boite formée par le P.

En fait, je suppose que c'est dû à la taille que je lui ai attribué. La div contenante fait une largeur de 700px, l'image elle en fait 440. Le paragraphe faisant 430px, il passe directement sous l'image (la div de gauche fait moins de 700-430px en gros, du coup elle est bien à droite du texte). Dans ce cas, IE7 et inférieur ne prennent pas en compte le float contrairement aux autres navigateurs.

Au final, pour convenir à tout le monde, on force la hauteur de l'image, donc çà arrange pas mal les choses.

Mais si vous avez des solutions pour le problème initial, je suis toujours preneur