DIV.cadre {
border: 1px solid #f29e00;
}

SPAN.nom {
font-size: 11pt;
font-weight: bolder;
color: #00002d;
margin-left:0.3em;
line-height: 2em;
}

SPAN.dep {
font-size: 11pt;
font-weight: bolder;
color: #192b2b;
margin-left: 1.5em;
}

DIV.texte {
border-top: 1px solid #f29e00;
font-size: 11pt;
color: #000026;
text-align: justify;
padding: 5px;
height: auto;
}

IMG {
float: left;
}
BODY, P, IMG {
margin: 0.2em;
}

<div class="cadre">
<span class="nom">Ville</span>
<span class="dep">Département</span>
<div class="texte"><p>Mon Image</p>
Mon Texte
</div></div>

Comment faire pour que l'image et ce quelque soit sa taille en hauteur (height="") ne sorte pas du cadre même si il n'y a que quelques mots dans le texte ?

Je m'explique :
Si j'ai une image de 200 pixels de hauteur et dix lignes de texte, l'image ne sort pas du cadre.

Si j'ai la même image avec une ou deux lignes de texte, l'image sort du cadre et masque les informations qui suivent.

Merci de votre aide

Jack Bocar

Bonjour,

Super Ce :
DIV.cadre:after {
clear: both
}

Les images ce placent bien dans le cadre.

Mais maintenant, c'est le cadre du dessus qui chevauche celui du dessous.

Alors, j'ai ajouté : min-height: 200px;

Pour les styles :

DIV.texte {
border-top: 1px solid #f29e00;
font-size: 11pt;
color: #000026;
text-align: justify;
padding: 5px;
min-height: 200px;
}

Peut-être as tu une autre astuce plus judicieuse ?


Merci

Jack Bocar

1: faut mettre le clear sur l'element que tu veux voir en dessous
2: j'aurais dit overflow:hidden sur l'element que tu veux cacher

Bonjour,

En fait ça fonctionne très bien avec Internet Expoler 7 et pas avec Firefox 3.

Pour que les deux acceptent l'affichage correctement, il faut faire comme ceci.
En fin, c'est ce que j'ai réussi à faire :



DIV.cadre {
border: 1px solid #f29e00;
}

SPAN.nom {
font-size: 11pt;
font-weight: bolder;
color: #00002d;
margin-left:0.3em;
line-height: 2em;
}

SPAN.dep {
font-size: 11pt;
font-weight: bolder;
color: #192b2b;
margin-left: 1.5em;
}

DIV.texte:after {
border-top: 1px solid #f29e00;
font-size: 11pt;
color: #000026;
text-align: justify;
padding: 5px;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
clear: both;
}

IMG {
float: left;
}
P, IMG {
margin: 0.5em;
text-align:justify;
}


<div class="cadre"><span class="nom">Nom</span> &nbsp; <span class="dep">(DEP)</span><div class="texte"><p>TEXTE</p></div></div><a href="#" class="menuNav">Top</a><br /><br />

Jack Bocar