Positionnement particulier

Bonjour à Tous,

J'ai un petit soucis sur une mise en page particulière que je n'arrive pas à résoudre...
J'ai un conteneur qui doit afficher : 1 titre + 1 image + texte autour de l'image. Tout ça deux fois avec la 2eme image alignée à doite (et en décalage par rapport au texte 1.

Le mieux c'est de vous montrer ce que je souhaite :



Je veux que l'image 1 soit alignée à gauche au centre du texte 1.
Je ne trouve pas comment forcer le texte à entourer l'image complètement (au dessus, à droite et en dessous). Sachant que les textes proviennent d'une base de données, ils peuvent varier en longueur.

Voilà le css des balises correspondantes :

#content{

float:left;
width: 545px;
padding-left:10px;
padding-top:10px;

}

#content h1
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.5em ;
	font-weight: bold;
	color: #D8D8D8 ;
	border-bottom: 1px solid #cc9966 ;
	background: url("pics/puce_titre.jpg") no-repeat;
	background-position: left;
}
#content p
{

	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
#image1 {

float:left;
width:295px;
height:224px;
margin-top:160px;
margin-right:20px;
background-image:url(pics/photo1.jpg) ;

}
etc....

Quand je fais ça le texte n'exploite pas l'espace dispo au dessus de l'image 1....
Une idée ?

Mini.G a écrit :
Quand je fais ça le texte n'exploite pas l'espace dispo au dessus de l'image 1....

Ben c'est normal, tu as une marge, et la marge fait partie de la chasse gardée du flottant : pas de texte dans cette zone. Imagine si le texte venait se loger dans l'espace réservé par ta marge à droite, par exemple : impossible d'avoir du texte pas collé à l'image.

Ce que tu veux faire me semble impossible en CSS. Le seul moyen, c'est de placer l'image au sein du texte qui doit l'entourer de trois côtés. Si le texte est généré dynamiquement et séparément de l'image, ça ne sera sans doute pas possible (sauf peut-être côté client, via Javascript... on retire l'image, et on la place après X caractères du bloc de texte... à voir si c'est réalisable ce genre de chose...).

Aie c'est la réponse que je redoutais... mais merci de m'éclairer Florent V. comme quoi il y a encore des limites au css... il me reste une solution qui pourrait marcher, c'est de dissocier les textes en 2 parties, la 1ere dans un div seul occupant le debut du content et 2 div en dessous (photo +reste du texte).. Comme ça je zappe la marge du haut sur la photo.

Bon ben... en attendant je vais me faire ça en php, si quelqu'un a une meilleure idée, n'hésitez pas.