Taille d'une div en fonction d'une image ?

Salut,

Je possède une div dans ma page dans laquelle j'insère une image ainsi que du texte.

L'image changera tous les mois car c'est une rubrique "dynamique"...
Je voudrais que la div qui possède des propriétés de background etc (pour faire des boites) puisse s'adapter en hauteur en fonction de l'image.
Actuellement, la div ne s'adapte pas à l'image.. juste au texte contenu.

Voila le code html de la div :

<div class="lt"></div>
			<div class="lbox">
				<h2>Publication: <a target="_parent" href="ethique.php"><strong>Ethique et proc&eacute;dures</strong></a></h2>

<!-- Image a inserer -->			
<img src="images/ethique.jpg" alt="" border="0" align="left"/>
			  	
			
			
			<p>Téléchargez ici le document "Ethique et procédures" par ON4UN et ON4WW.<br />
			Ce document décris les procédures et les bonnes manières de transmettre et d'écouter. Ce document est librement téléchargeable depuis le lien ci dessous.   </p>
			<p>Un document &agrave; diffuser au maximum... </p>
			<p><a href="ethique.pdf" target="_blank">Télécharger (en PDF et/ou en PPS) cliquez ICI</a> </p>
			
			</div>

et le css associé :

	.lt {
		height: 10px;
		background: #6E6E6E url(lt.gif) no-repeat;
		color: #FFF;
	}
.lbox {
		color: #eee;
		padding: 3px 12px;
		margin: 0 0 15px 0;
		background: #6E6E6E url(lb.gif) no-repeat bottom left;
		
		
	
	}
	
	.lbox a {
		color: #FFFCD1;
		background: inherit;
	}
	
	.lbox a:hover{
		color: #eee;
		 background: #6E6E6E;	
	}
	
	.lbox h2 {
		color: #FFF;
		background: #6E6E6E;
	}
	
	.lbox img {
		margin-right: 10px;
		border:solid 1px #eee;
		padding: 2px 2px 2px 2px;
		
	}
	

Savez vous comment je pourrai faire en sorte que la div .lbox adapte sa hauteur en fonction de l'image insérée ?

Merci
Guillaume

Bonjour,
Tu peu utiliser la fonction getimagesize() de PHP, qui peu être très intéressante.

Bonjour,

ton problème vient de là :

<img src="images/ethique.jpg" alt="" border="0" [b]align="left"[/b]/>

L'attribut align="left" a peu ou prou le même effet qu'un float:left en CSS, et un flottant dépasse de son parent, sauf dans certains cas.

PS : rien à voir mais en xhtml servi en tant que text/html il doit y avoir un espace avant la fermeture (caractères "/>") des éléments à une seule balise, comme ceci :

<img src="images/ethique.jpg" alt="" border="0" align="left" />

Note l'espace supplémentaire par rapport à ton code.
Modifié par Lanza (30 May 2008 - 15:06)

Je te remercie de tes remarques...

J'ai fait le nécessaire ..... en enlevant les images Finalement le site est bien plus lisible sans...

Merci aussi pour la remarque de syntaxe...

à bientôt
Guillaume