Float embetant

Bonjour,

J'ai un petit problème avec un float... comme d'hab il me pose problème...

voila donc j'essaie juste de mettre une image dans une div et qu'elle se mette à gauche et que le texte se mette partout ailleurs...

je vous passe mes codes pour vous montrer :

voila le Xhtml

<div id="conteneur">
  <div class="blog">
    <div style="float: left;"><img class="img_desc" src="avat.png" alt="Image Description" /></div> 
    <b>Nom du blog : </b>Group of Blog<br />
    <b>Auteur : </b>Myself<br />
    <b>Description : </b>
  </div> 
</div>

et le CSS

	#conteneur {
      margin: auto;
	  padding: 5px;
	  border: 1px solid black;
	  width: 80%;
	  background-color: #FFFFFF;
	}
	.blog {					   
	  margin: auto;
	  text-align: left;
	  width: 100%;
	  padding: 5px;
	  border: 1px solid black;
	  
	}			 
	.img_desc {
	  border: 1px dashed black;
	  margin-right: 5px;
	  margin-bottom: 5px
	}

Donc le problème est que l'image que j'insère passe comme par au dessus de la div et sort donc par en dessous...
et la div est juste assez grande pour prendre le texte...

j'ai déja entendu d'un clear: both; mais j'ai déjaà essayé de le mettre à certain endroit mais ca marche pas...

Quelqu'un sait comment faire ?

Merci d'avance

++

Pourquoi n'essaye tu aps de mettre la propriété float : left dans .img_desc

ça ferait
css

 #conteneur {
margin: auto;
padding: 5px;
border: 1px solid black;
width: 80%;
background-color: #FFFFFF;
}
.blog {
margin: auto;
text-align: left;
width: 100%;
padding: 5px;
border: 1px solid black;

}
.img_desc {
float: left;
border: 1px dashed black;
margin-right: 5px;
margin-bottom: 5px
}

et xhtml

<div id="conteneur">
<div class="blog">
<img class="img_desc" src="avat.png" alt="Image Description" />
<b>Nom du blog : </b>Group of Blog<br />
<b>Auteur : </b>Myself<br />
<b>Description : </b>
</div>
</div>

J'ai pas testé mais je pense que cela peut résoudre ton problème

Justement, d'habitude je code tout dans le CSS et j'avais ca, mais ca foirait aussi donc j'avais essayé une autre alternative

Mais j'ai réussi, voici mon code :

<div class="blog">
  <img class="img_desc" src="avat.png" alt="Image Description" />
  <div><b>Nom du blog : </b>Group of Blog<br />
    <b>Auteur : </b>Myself<br />
    <b>Description : </b>
  </div>
  <div style="clear: left;"></div>
</div> 

et cela marche je suis content

Bonsoir,

Pourquoi ne pas appliquer le float directement sur l'image ?

.blog img{
float:left;
propriété:valeur;
etc.
}

Justement, j'avais aussi essayé cela et ca fesait la même erreur...

Mais j'ai trouvé la solution recemment...

à la fin dans ma div "blog" j'ai mit <div style="clear:left;"></div>

et ca marche

je sais pas si c'est la bonne manière mais cela marche...

Moi je vois que ton balisage est assez étrange, pour ne pas dire mauvais

Ca ressemble fort à une liste de quelque chose ton truc
Pourquoi du <b>.... <br /> alors ??

Pourtant, t'as le choix au niveau des listes, <ul>, <dl>, <ol> ...


Allalala, le clear magique du gourou sorcier du CSS lol
Faut être sûr de comprendre à quoi ça sert