[Résolu] CSS Float + Width 100%

Bonjour à tous,

J'essaye de faire un carrousel et je me heurt à un problème :
Voici ma structure :
<div id="gallery">
<div id="photos">
<div class="photo"></div>
[...]
</div>
</div>

J'ai une taille fixe sur #gallery, les .photo font 100% height/width avec l'image en background-image

Cependant, pour faire défiler les photos, je comptais déplacer #photos vers la gauche (déplacement relatif) mais les .photo ont bon être en float: left, et ne pas avoir de taille sur #photos, elles passent automatiquement à la ligne ce que je ne veux évidemment pas. Je voudrais donc désactiver le retour à la ligne des éléments float.

Voici mon CSS pour le moment :

#gallery {
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.photo {
	height: 100%;
	width: 100%;
	background-color: #000;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	float: left;
}

Merci pour vos réponses.
Modifié par Korko (16 Mar 2012 - 16:41)

Salut !
Chaque élément en float (ici .photo) se positionne à côté de l'élément float précédant tant qu'il ne dépasse pas la largeur de leur contenant (ici #photos). Sinon l'élément passe automatiquement à la ligne.
Ton conteneur #photos fait 100% de largeur et tu demandes à chacune des .photo d'occuper 100% de cet espace, elles se retrouvent donc toutes à la ligne.

Exemple de solution :
1) Donner une largeur fixe à tes .photo
2) Donner une largeur fixe à ton conteneur #photos, une largeur assez importante pour accueillir tous tes .photos en largeur ( => largeur de ta .photo * nb de .photo)

PS :

display: inline-block;
float: left;

Il faut que tu choisisses entre les 2 car un float n'a pas d'effet sur un élément inline.
Modifié par Bobdade (18 Mar 2012 - 11:50)