SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

    cars.png

    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
    KISS - Keep It Simple Stupid

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,435
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •