Row of centered images and text

Windbrand · 11-18-2012, 03:27 AM

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:

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.

comport9 · 11-18-2012, 03:45 AM

I don't know about columns, but you could just use "float: left" instead. Then your "columns" will be side-by-side without any additional fuss.

sunfighter · 11-18-2012, 04:23 AM

@Windbrand the CSS3 column-count property is used to divide text in the div element into columns, like a news paper. It has no place here. Use the float as comport9 said and set a margin-right for the space between them. You also should use a padding-left on the container to move the divs to the right.

You don't need .container > div A .container div will work.

minder · 11-18-2012, 06:19 AM

Using <br /> to space things out is a bad idea. A better option is to use margin and padding and to make your layout elastic (auto-adjusted as you put it) you can use % for dimensions.

Here is a basic example of an elastic layout with 4 images. If you have a different number of images, just adjust the %'s for .picContainer in the css to suit.

The images and their container will automatically shrink or enlarge as you change the browser size.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #container {
                width: 70%;
                margin: 30px auto 0px auto;
                border: 3px solid blue;
                overflow: hidden;
            }
            .picContainer{
                float: left;
                width: 20%;
                margin: 0px 2.5% 0% 2.5%;
            }
            .picContainer img {
                display: block;
                width: 100%;
            }
            .picContainer p{
                margin: 10px 0px 0px 0px;
                text-align: center;
            }
            #gutter{
                margin: 10px 10px 10px 10px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="gutter">
                <div class="picContainer" >
                    <img src="image1.jpg" alt="" />
                    <p>caption 1</p>
                </div>
                <div class="picContainer">
                    <img src="image2.jpg" alt="" />
                    <p>caption 2</p>
                </div>
                <div class="picContainer">
                    <img src="image3.jpg" alt="" />
                    <p>caption 3</p>
                </div>
                <div class="picContainer" >
                    <img src="image4.jpg" alt="" />
                    <p>caption 4</p>
                </div>
            </div>
        </div>
    </body>
</html>

Excavator · 11-18-2012, 09:23 AM

Hello Windbrand,
Floats are great for putting elements side by side but you'll have to do the math to center them.
Look at this approach (the margin is what controls the space between them)

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
.container{
	width: 950px;
	padding: 10px 10px 50px;
	text-align: center;
	background: #333;
}
.container > div {
	height: 350px;
	width: 125px;
	margin: 0 5px;
	display: inline-block;
	background: #f00;
}
</style>
</head>
<body>
	<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>
    <!--end .container--></div>
</body>
</html>