Align multiple images from a database in a boxes of 5 rows and columns

HTML & CSS
1

hi guys,
I have a list of products from a database, that are loaded dynamically in a grid.

However I want to align the products in a box like fashion of rows and columns. e.g. See this screen shot I pinched off the internet

The only idea I have is to create a table with rows, which is a bad design.

How can I get this done ?

many thanks
M

2

You can do it with css and float; once they get to the end of the containing division they will start a new row. But the problem I found doing this way in my gallery was different size images spoilt the layout. I got around this by padding all the images out to the same size when I created them.

3

Hi,

As mentioned by Rubble you can float the images as long as the images are the same size otherwise they will snag when they wrap.

Alternatively you can use display:inline-block which will allow you to center the items as well as have elements of varying height.

Here’s an example of both:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1, h2 {
	text-align:center;
	margin:20px 0 10px
}
.gallery {
	width:50%;
	border:5px solid red;
	padding:20px;
	overflow:hidden;
	margin:10px auto 20px;
}
.gallery ul {
	margin:0 0 0 -50px;
	list-style:none;
	padding:0;
	text-align:center;
}
.gallery li {
	float:left;
	width:100px;
	height:100px;
	text-align:center;
	line-height:100px;
	margin:20px 0 20px 50px;
	border:1px solid #ddd;
}
/* example 2 */
.gallery2 ul { margin:0; }
.gallery2 li {
	float:none;
	display:inline-block;
 *display:inline;/* ie7/6 imnline block support - remove if not supported*/
 *zoom:1.0;/* ie7/6 inline block support - remove if not supported*/
	vertical-align:top;
	margin:20px 25px 20px 25px;
}
</style>
</head>

<body>
<h1>Floated Gallery</h1>
<div class="gallery">
		<ul>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
		</ul>
</div>
<h2>Inline-block gallery</h2>
<div class="gallery gallery2">
		<ul>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
				<li>test</li>
		</ul>
</div>
</body>
</html>