CSS: una tecnica alternativa al floating per il layout degli slideshow

Solitamente il layout CSS degli slideshow fa uso del floating per allineare le slide. Esiste tuttavia una tecnica alternativa.

Partiamo dalla seguente struttura HTML:

<div id="slider">
	<div id="slider-wrapper">
		<img src="image1.jpg" alt="" class="slide" />
		<img src="image2.jpg" alt="" class="slide" />
		<img src="image3.jpg" alt="" class="slide" />
	</div>
</div>

La soluzione consiste nell'usare il valore inline-block della proprietà display combinato con la proprietà white-space:

#slider {
	max-width: 960px;
}

#slider-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
}

.slide {
	display: inline-block;
}

Con questa soluzione non siamo più costretti ad impostare una larghezza per il contenitore interno.