How do I prevent images structured as a horizontal list from wrapping? - css

Question

I have a row of distinct images that I want to use as a banner. Upon resizing, I don't want the last image(s) to wrap. I've done prerequisite google and search on stackoverflow; the examples I found were regarding text, not images.
Here's the jsfiddle: http://jsfiddle.net/pHytx/
The most relevant part of the code is probably the CSS:
#slidebanners {
width:100%;
}
#slidebanner ul{
padding: 0;
margin: 0;
overflow: hidden;
}
#slidebanner li{
float: left;
}
#slidebanner img{
height: 200px;
}
.page-header {
font-size: 2em;
padding: .5em;
margin-top: 15px;
}
The problem with this solution is that it doesn't get rid of the gap between the pictures; float gets rid of that gap. I could add a negative left margin, but that has weird effects because the negative margin gets applied unevenly (i.e. the rightmost image needs the most negative margin, but this affects the size of the leftmost image)

Answer 1

For this you can use the exotic display:table-cell;
See Demo:
http://jsbin.com/OxEPuJi/1/edit
Basically display:table-cell; prevents elements to drop on the next line. EVER!
And it also forces them to be next to each other without float.
Codes:
.img {
display:table-cell;
}
I apply this to the wrapper element which holds each image in my demo.

Answer 2

It's best to go for white-space: nowrap combined with display: inline-block, as shown in the accepted answer to the question you linked to.
The problem then becomes how to remove the gaps between the lis.
Here's a demo: http://jsfiddle.net/thirtydot/pHytx/4/
I went with removing the whitespace between the elements in the HTML.
Some people don't like editing their HTML to remove the gaps. To those people I say: deal with it. This is the easiest way to remove the gaps.
<ul>
<li>
<img src="media/images/slides/olympic-1.jpg" />
</li><li>
<img src="media/images/slides/olympic-2.jpg" />
</li><li>
<img src="media/images/slides/olympic-3.jpg" />
</li><li>
<img src="media/images/slides/olympic-4.jpg" />
</li><li>
<img src="media/images/slides/olympic-5.jpg" />
</li>
</ul>
#slidebanner ul {
white-space: nowrap;
padding: 0;
margin: 0;
list-style-type: none;
}
#slidebanner li {
display: inline-block;
vertical-align: top;
}
#slidebanner img {
height: 200px;
vertical-align: top;
}
To hopefully stop these pesky downvotes, here is a working implementation of the display: table-cell approach, thanks to user1721135 for the idea.
http://jsfiddle.net/thirtydot/pHytx/5/
#slidebanner {
float: left;
border: 1px solid red;
}
#slidebanner ul {
display: table;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
#slidebanner li {
display: table-cell;
vertical-align: top;
}
#slidebanner img {
height: 200px;
vertical-align: top;
}
.page-header {
clear: both;
font-size: 2em;
padding: .5em;
margin-top: 15px;
}