Pour la préparation d’un thème pour le site de Henchou Don Lanvaeleg, j’ai rencontré un problème pour placer une image dans un bloc div et empecher celle ci de déborder de ce bloc.
Le problème n’est pas complexe, mais quand on développe des pages html de façon occasionnelle, on peine laborieusement pour obtenir le résultat voulu.

Un exemple du problème

Pour illuster mon problème, le code d’une page qui pose problème :

    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>Inclure une image dans un bloc</title>
      <link rel="stylesheet" type="text/css" href="./style.css">
    </head>

    </body>
      <h1>Inclure une image dans un bloc</h1>
    <div class="zone">
      <!-- img src="../logo_henchou_don_x100.png"-->
      <img src="thunderbird.png">
      <p>Création d'un bloc contenant du texte</p>
      <ul>
        <li>sur plusieurs lignes</li>
        <li>on remplit comme on peut ...</li>
      </ul>
      <p>La page contient également une image,il faut qu'elle rentre dans le bloc (<b>div</b>).</p>
    </div>

    <body>
    </html>

et le fichier CSS qui l’accompage :

    body {
      background-color: #C0C0C0;
      font-size: 0.3em;
      }

    h1 {
      margin-top: 1em;
      font-size: 2em;
    }

    pre {
      background-color: #F0F0F0;
      font-family:Courier New,Courier;
      font-size: 1.1em;
      color:#0000C0;
    }

    .zone {
      border-width:10px;
      border-style:solid;
      border-color:#EEEEEE;
      background-color:#FFFFE0;
      padding: 10px;
      }
    img {
    float: right;
    }

On obtient comme résultat :

Image débordant du
bloc

Pour mettre en évidence le débordement, il faut choisir une image de taille supérieure à la zone de texte, ou alors il faut réduire la taille des caractères du corps de page (body) dans le fichier css.

Garder l’image dans le bloc

Le problème a pour origine la propriété float de l’image ; avec celle ci, elle devient indépendante du bloc div et n’est plus cantonnée au bloc.

Pour résoudre le problème, il faut utiliser la propriété clear avec comme valeur both.
Il faut rajouter avant la fermeture du div, la ligne suivante :

    <p style="clear: both;"></p>

Et l’on obtient alors :

Image ne débordant pas du
bloc