[Résolu] Spacer de la FAQ

Bonsoir,

Je pensais avoir bien lu et compris dans la faq le point sur "Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?".

Et bien ça ne m'empêche pas d'avoir mon paragraphe qui ne descent pas jusqu'à la fin de son conteneur ".element".

Voici le code :

<style>
* { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }

.element {
	background-color: #FF3300;
}

.element p {
	margin:0 0 1em 2.7em;
	padding: 0 0 0 0.5em;
	display: block;
	background-color: #CC0000;
	border: thin solid #000000;
}
.element p:hover {
	background-color: #FF0066;
	border: thin solid #FFFFFF;
}
.gauche {
	border: thin dotted #3c3584;
	float: left;
	margin: 0 10px 0 0;
}
.spacer {
	clear: both;
	font-size: 1px;
}
</style>
<div class="element">
	<p>bla bla bla<br /><br /><img src="..." alt="..." width="251" height="175" class="gauche" />Commentaire de l'image bla bla bla<br>bla bla bla bla<br>bla bla bla</p><hr class="spacer" />
</div>
<div class="element">
	<p>bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>

Ça coince à quel niveau svp ?

Merci de votre coup de pouce.
Modifié par globy (24 Nov 2005 - 09:39)

Bonjour,

Un "spacer" doit être placé dans l'élément qu'on veut étendre en hauteur. Ici, ton hr étant à l'extérieur du paragraphe, il n'a aucun effet.

Tu peux au choix :
- utiliser un span class="spacer" contenant un espace insécable et doté d'une propriété display: block, placé dans le paragraphe;
- ou bien ne pas utiliser de spacer et appliquer un overflow:hidden ou un overflow:auto au paragraphe, en y ajoutant une dimension fictive pour IE Win qui n'implémente pas cette utilisation de l'overflow.

Merci Laurent. Les deux méthodes marchent très bien. Même si j'ai une préférence pour la première solution et que la paragraphe s'étire tout seul dans la hauteur.

Laurent Denis a écrit :
Un "spacer" doit être placé dans l'élément qu'on veut étendre en hauteur. Ici, ton hr étant à l'extérieur du paragraphe, il n'a aucun effet.

Oui, un petit oubli de restauration du code à force de le titurer en tous sens. Mais ce que je ne m'explique par encore est que ce <hr class="spacer" /> ne remplit pas son rôle de spacer dans le cas présent, même en le glissant bel et bien entre les balises de paragraphe

Bon, en tous les cas c'est [Résolu]. Merci encore.
Modifié par globy (24 Nov 2005 - 09:38)