I'm trying to create a row of banner-like images, centered and gap between each auto-adjusted, each with an aligned text below it. I tried to use the CSS property columns, but I'm unable to change the amount of space between each element.

Picture:
http://i.imgur.com/jk382.jpg

This is what I have so far:

HTML:
Code:
<div class="container">

	<div id="pic1">
		<img src="pictures/characters/1.png">
		<br>
		<br>
		<span id="pic1text">text1</span>
	</div>
				
	<div id="pic2">
		<img src="pictures/characters/2.png">
		<br>
		<br>
		<span id="pic2text">text2</span>
	</div>
				
	<div id="pic3">
		<img src="pictures/characters/3.png">
		<br>
		<br>
		<span id="pic3text">text3</span>
	</div>
				
	<div id="pic4">
		<img src="pictures/characters/4.png">
		<br>
		<br>
		<span id="pic4text">text4</span>
	</div>
				
	<div id="pic5">
		<img src="pictures/characters/5.png">
		<br>
		<br>
		<span id="pic5text">text5</span>
	</div>
				
</div>
CSS:
Code:
.container{
	width:950px;
	height:350px;
	-moz-column-count:8; /* Firefox */
	-webkit-column-count:8; /* Safari and Chrome */
	column-count:8;
}

/*div of each image*/
.container > div {
	display:inline;
	height:350px;
	width:125px;
}
But the moment I add "column-gap:5px;" the pictures won't be in a single row anymore and the formatting is completely messed up. I also need an identifier for each text, as I'm gonna need to fade in/out these text when the mouse hovers over each image, which I'll do once the formatting is done.