Mise en page horizontalement

Bonjour,

J'aimerai pouvoir étendre une page à l'infinie sur sa largeur, en fonction de son contenu, et pouvoir utiliser le scroll pour défiler la page.
Le problème, c'est qu'une fois les div "vignette" arrivées à limite de la largeur de "selection", elle passent en dessous.

Voici mon code de base :

<div id="content">
	<div id="selection">
		<div id="vignette_0" class="vignette"></div>
		<div id="vignette_1" class="vignette"></div>
		<div id="vignette_2" class="vignette"></div>
		<div id="vignette_3" class="vignette"></div>
		<div id="vignette_4" class="vignette"></div>
		<div id="vignette_5" class="vignette"></div>
		<div id="vignette_6" class="vignette"></div>
		<div id="vignette_7" class="vignette"></div>
		<div id="vignette_8" class="vignette"></div>
	</div>
</div>

		#selection {
			border: 0;
			margin: 0;
			padding: 0;
			overflow: auto;
			width: 768px;
			height: 200px;
		}

		.vignette {
			height: 150px; 
			width: 100px;
			display: inline-block;
			margin: 10px;
			padding: 10px;
			background: #EFECCA;
		}

Est-il possible, en CSS, de pouvoir aligner horizontalementdes DIV sans retour à ligne ?

Edit : il faut lire horizontalement et pas verticalement !
Modifié par celionor (04 Nov 2011 - 11:40)

Bonjour,

j'ai du mal à suivre : si tu veux étendre ta page sur la largeur, pourquoi fixer une largeur en px à ton conteneur..? A priori il te suffit de retirer le "width:768px" sur ton #selection pour obtenir l'effet désiré..

Bonjour,

Je ne comprend pas bien ton problème.
Etant donné que le bloc "selection" à une largeur fixe, il est normal que les vignettes se mettent sur plusieurs lignes si la somme de leur largeur dépasse celle de "selection".
Si tu souhaite que les vignettes se mettent toute à la suite (horizontalement), il ne faut pas donner de largeur au bloc selection.

Mais dans tous les cas, je trouve que forcer un scroll horizontal est rarement une bonne chose..

Edit: grillé de 10sec..
Modifié par Romain.E (04 Nov 2011 - 11:35)

Bonjour à tous les deux,

Edit : il faut lire horizontalement et pas verticalement ! Pardon..

Alors si vous faites le test, vous verrez que les div, même si vous ne définissez pas de largeur du bloc "selection", reviendront à la ligne tout de même.

		body{
			margin: 0;
			padding: 0;
			width: 100%;
		}
		#content {
			position: absolute;
			top: 0;
			left: 0;
			height: 900px;
			width: 100%;
			margin: 0;
			padding: 0;
		}
		#selection {
			height: 200px; 
			width: 100%;
			background-color: #A7A37E;
			margin: 0;
			padding: 0;
			overflow: auto;
		}

Même résultat pour un float:left;

Romain.E : Cela m'est imposé, pas le choix de faire autrement..
Modifié par celionor (04 Nov 2011 - 11:58)