fit all floated items in a single row - css-float

Question

My Fiddle:
http://jsfiddle.net/trK7C/
HTML:
<div class="itemsContainer">
<div class="image">
<img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
</div>
</div>
<div class="itemsContainer">
<div class="image">
<img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
</div>
</div>
<div class="itemsContainer">
<div class="image">
<img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
</div>
</div>
<div class="clear">
CSS:
.itemsContainer {
float: left;
width : 300px;
height : 300px;
margin-left : 2px;
border : 1px solid black;
position : relative;
}
.image {
width : 300px;
height : 175px;
margin-bottom : -115px;
z-index : -1;
border : 1px solid green;
}
.image img {
width : 300px;
height : 175px;
}
3rd item floats to the next row on the page
How can I fit the 3rd item in the same row with no horizontal scrollbar?

Answer 1

http://jsfiddle.net/trK7C/4/
change float:left to display:inline-block and wrap all of it in a container with a width big enough to hold it.
#container {
width:940px;
}
.itemsContainer {
display:inline-block;
width : 300px;
height : 300px;
margin-left : 2px;
border : 1px solid black;
position : relative;
}
<div id="container"> <!-- holds all the html in the fiddle -->