Hauteur des boites pour des images

[fgaascht]

Bonjour,

J'ai inséré des images dans des div mais suite aux différentes tailles des images (vue paysage ou classique) ainsi qu'à la quantité de texte dans div description, mes images dépassent et décalent toute ma page

Comment faire pour obliger mes div description à s'agrandir ? j'ai essayé en mettant height:auto, mais ça ne fonctionne pas. En enlevant float:left non plus...

.description
{
font-size: 0.9em;
text-align: justify;
border: 1px solid #555A64;
background: #DDDDDD;
color: #222;
padding: 2px 8px 0px 8px;
margin: 5px 0px;
}

.description img
{
float: left;
margin: 5px 5px 0px 0px;
}

Merci d'avance pour votre aide.

[vincedo]

Tu dois rajouter la propriété float: left; au sélecteur .description :

.description {
  ...
  float: left;
  ...
}

Ensuite, il faudra annuler ce float en ajoutant un div de clearing juste après ton div description :

<div class="description">
  <img src="" ... />
</div>

<div class="clear"></div>

Le CSS pour .clear étant :

.clear {
  clear: both;
}

Note qu'il y a des façons plus élégantes de "clearer" le float, sans ajouter de div supplémentaire (une recherche Google devrait t'aider là-dessus).

[ghost]

Bonjour,

Pour le float c'est ok, si tu veux que ton div suive le contenu rajoute à ta class description :

overflow: visible;

height: 1%;

et pour IE

html>body .description {
overflow: hidden
}

Ca devrait le faire