Row of centered images and text

[Windbrand]

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:

<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:

.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.

[drunken_dev]

wasting your time.

Just use a table, collapse borders, border:none and use 1 row for images the next for text.
Don't specify height and the table cells will auto adjust to fit you images and the text below them.
text-align:center then add padding and text format as needed.

Divs are useful but if you got a lot and they are the same I find a table works quite well with other elements in the page.

CSS has a row:hover and so does JavaScript, both pretty easy to use and you can throw both in there for IE and for FF.

You can probably get away with using two row classes and this will let you hover some and ignore others.

Dan

[simplypixie]

Firstly, change your divs to classes then you only need one class (without having to use nested CSS which can cause problems later down the line) and float each one to the left. How I would do it (your total image widths (width plus margin) don't fit into your container size so I have adjusted bits accordingly):

<div class="container">

	<div class="pic">
		<img src="pictures/characters/1.png">
		<span id="pic1text">text1</span>
	</div>
				
	<div class="pic">
		<img src="pictures/characters/2.png">
		<span id="pic2text">text2</span>
	</div>
<!-- And so on for each image -->

.container{
	width:950px;
        padding: 0 19px;
}

/*div of each image*/
.pic {
	float: left;
	height:350px;
	width:126px;
        margin-right: 5px;
}
.pic:nth-child(7n+7) {
        margin-right: 0;
}