Horizontal slideshows via display:table-cell

The following css results in the rendering shown below:

#container1 {
	overflow: auto;
	width: 200px;
}

#container1 .slide {
	display: table-cell;
}

#container1 .slide img {
	display: block;
}

A slide title

More or less the same effect can be achieved using the following CSS (and if there is no white-space between the slide divs then the effect is identical). However, Firefox<=2 does not support the inline-block display value, whilst IE6 and IE7 nominally support it but its only effect appears to be to trigger hasLayout.

#container2 {
	overflow: auto;
	width: 200px;
	white-space: nowrap;
}

#container2 .slide {
	display: inline-block;
}

#container2 .slide img {
	display: block;
}

A slide title

IE6 and IE7 do not support the table* values for the display property, and whilst they nominally support the inline-block value its only effect appears to be to trigger hasLayout. However, an effect similar to inline-block can be achieved in these browsers by giving hasLayout to elements which have inline display:

#container3 {
	overflow: auto;
	width: 200px;
	white-space: nowrap;
}

#container3 .slide {
	zoom: 1;
	display: inline;
}

#container3 .slide img {
	display: block;
}