Prevent overflow with li elements containing images - html

Question

I wish to display a ul that has a maximum of three li on each row. Each li contains a vertically centered image with an equal width, so I thought this would be easy. However, I can't stop it from overflowing:
Instead, I'd like the fourth image to clear to a new line. Here's my code:
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>​
ul {
border-spacing: 2px;
width: 150px;
background: red;
}
li {
height: 48px;
background: #000;
display:table-cell;
vertical-align:middle;
}
img {
width: 48px;
display:block;
vertical-align:middle;
}​
How can I resolve this?
UPDATE: Here's a jsfiddle with a clearer example.

Answer 1

Did you try setting overflow?
ul {
border-spacing: 2px;
width: 150px;
background: red;
overflow-x:hidden
}
To have the "overflow" move to the next row, make your UL as wide as the three images, use float:left on your li and set the width of your li.
ul {
width:400px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
ul li {
width:200px;
height:200px;
display:block;
float:left;
}

Answer 2

Tell the lis to float http://jsfiddle.net/8Pvtb/1/
li {
height: 48px;
background: #000;
display:table-cell;
float: left;
vertical-align:middle;
border-spacing: 12px;
}
But I don't understand why you want display:table-cell, it's not. I would use inline-block
http://jsfiddle.net/8Pvtb/5/
ul {
border-spacing: 2px;
width: 155px;
background: red;
}
li {
height: 48px;
background: #000;
display: inline-block;
vertical-align:middle;
border-spacing: 12px;
}
img {
width: 48px;
vertical-align:middle;
}​