CSS - Displaying images in a div in a line - html

Question

I have 3 images inside a div and i want them to be displayed in a single line. The output thats coming from my current code is that 2 images are one a single line and the other one at the bottom.
Any help would be appreciated!
My Code of HTML:
<div id="slider_container">
<div class="slider">
<img id="1" src="Kid Playing Guitar_big.jpg" border="0" style="float:left;" />
<img id="2" src="University Students_big.jpg" border="0" style="float:left;" />
<img id="3" src="Business Man_big.jpg" border="0" style="float:left;" />
</div>
<div class="slider_thumbnails">
<img id="1" src="Kid Playing Guitar.jpg" border="0" />
<img id="2" src="University Students.jpg" border="0" />
<img id="3" src="Business Man.jpg" border="0" />
</div>
</div>
My code for CSS:
#CHARSET "UTF-8";
#slider_container{
height: 360px;
width: 720px;
}
.slider{
width: 720px;
height: 360px;
overflow: hidden;
background-image: url(loading.gif);
background-repeat: no-repeat;
background-position: center;
}
.slider img{
width: 480px;
height: 360px;
display: none;
}
.slider_thumbnails{
width: 720px;
display:inline-block;
}
.slider_thumbnails img{
display: inline-block;
}
Please explain the code after you post your answer.

Answer 1

.slider_thumbnails{
width: 720px;
display:inline-block;
white-space:nowrap;
}

Answer 2

I think the problem is the total width of your images equals the width of your container. Try changing the width of your images to 235.
It works on your jsfiddle.

Answer 3

What about a float:left;?
.slider img{
float: left;
position: relative;
}
For float, width is very important. So don't forget to measure 'em up and define the appropriate width calculated after margin, padding.

Answer 4

.slider img{
width: 480px;
height: 360px;
display: none;
}
.slider_thumbnails{
width: 720px;
display:inline-block;
}
.slider_thumbnails img{
display: inline-block;
}