Problème de positionnement: mettre un div à la ligne après plusieurs div en floa

Résolu
sagat06 Messages postés 166 Date d'inscription mercredi 27 juin 2007 Statut Membre Dernière intervention 31 mars 2014 - 9 nov. 2010 à 16:45
sagat06 Messages postés 166 Date d'inscription mercredi 27 juin 2007 Statut Membre Dernière intervention 31 mars 2014 - 9 nov. 2010 à 18:11
Bonjour à tous,
je vous explique donc mon soucis par un exemple type:

j'ai un div conteneur en position relative contenant 3 div en position float:left. Les 2 premiers blocs sont alignés et le 3è revient logiquement à la ligne, s'alignant à gauche (ils font la même largeur).

Mon soucis est que les éléments suivants (div ou autres n'étant plus en float:left ni right) sont alignés par rapport à ce dernier bloc même en faisant suivre le div conteneur de balises
ou en lui mettant un margin-bottom (je voudrais un retour à la ligne).

Pour pallier à ce soucis, je définis généralement une hauteur à mon div conteneur, ceci résolvant le tout. Mais dans mon nouveau projet, je ne connais pas à l'avance sa taille, plusieurs blocs pouvant être intégrés.
Et biensûr, 1 fois sur 2 le nombre de bloc sera impaire et il y aura un soucis.

J'aimerais donc vos avis et solutions à ce soucis, en espérant avoir été clair (ce qui n'est pas évident, j'en conviens).

En attendant vos suggestions,
merci d'avance.


Signé Sagat

2 réponses

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
9 nov. 2010 à 17:59
Bonjour,
il existe clear:both pour mettre fin à la ligne
exemple
<html>
<head>
<title>...</title>
<style type="text/css">
div {
 width : 100px;
 height : 100px;
 border : 1px solid #e0e0e0;
}
.floatleft {
 float: left;
}
.retourligne {
 clear: both;
}
</style>
</head>


DIV 1


DIV 2


DIV 3


DIV 4


DIV 5


</html>

;O)
3
sagat06 Messages postés 166 Date d'inscription mercredi 27 juin 2007 Statut Membre Dernière intervention 31 mars 2014 1
9 nov. 2010 à 18:11
Merci PetoleTeam, c'est exactement ce dont j'avais besoin.

Signé Sagat
0
Rejoignez-nous