Want to display 4 images in a row, with a description below each image

Question

I'm tring to practice table-less design, and I trying to get the following:

4 images per row, and under each image is the name of the image.

So my DOM:

<div id="images">
     <div class="imageblock">
           <div class="image"><a href=""><img src=""/></a></div>
           <div class="meta">some filename</div>
     </div>
     <div class="imageblock">
           <div class="image"><a href=""><img src=""/></a></div>
           <div class="meta">some filename</div>
     </div>
      ..

</div>

Answer 1

My Advice is :

Use UL and LI tags...

<ul class="gallery">
    <li>
        <a href="http://www.rbacarin.com.br/novo-ka-st-2009/17042010207.jpg" class="thumb"><span><img src="17042010207_t.jpg" alt="Who we are" /></span></a>
        <h2><a href="http://www.rbacarin.com.br/novo-ka-st-2009/17042010207.jpg"&gt;1&lt;/a&gt;&lt;/h2&gt;

    </li>
...
</ul>

and this css:

ul.gallery {
    width: 708px;
    list-style: none;
    margin: 0 auto; padding: 0;
}
ul.gallery li {
    float: left;
    margin: 10px; padding: 0;
    text-align: center;
    border: 1px solid #ccc;
    -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
    -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
    -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
    display: inline; /*--Gimp Fix aka IE6 Fix--*/
}

as you can see in my site, look the source: http://www.rbacarin.com.br/novo-ka-st-2009/salao-acessorios-2010-clube-do-novo-ka.html

Answer 2

#images {
  width: 800px;
  float: left;
}

.imageblock {
  width: 200px;
  float: left;
}

  .imageblock .image {
    width: 200px;
    float: left;
  }

  .imageblock .meta {
    width: 200px;
    float: left;
  }

Untested, but its pretty simple so should work. You'll want to add padding or margin as you see fit to seperate them all out a little.

Answer 3

You're much better off using lists for this. Here's some code I've implemented for my daughters' site:

<ul id="galleries"> 
                    <li> 
                        <a href="http://lexie.myredmonkey.co.uk/index.php?/gallery/image_full/6/"&gt;&lt;img src="http://lexie.myredmonkey.co.uk/img/gallery/May2010/with-daddy_thumb.jpg"  class="border" width="200" height="200" border="0" title="With Daddy and his beard" /></a> 
                        <p>With Daddy and his beard</p> 
                                            </li> 

                    <li> 
                        <a href="http://lexie.myredmonkey.co.uk/index.php?/gallery/image_full/8/"&gt;&lt;img src="http://lexie.myredmonkey.co.uk/img/gallery/May2010/with-mommy_thumb.jpg"  class="border" width="200" height="200" border="0" title="Mommy and Me" /></a> 
                        <p>Mommy and Me</p> 
                                            </li> 

                    <li> 
                        <a href="http://lexie.myredmonkey.co.uk/index.php?/gallery/image_full/7/"&gt;&lt;img src="http://lexie.myredmonkey.co.uk/img/gallery/May2010/with-grandad_thumb.jpg"  class="border" width="200" height="200" border="0" title="With Grandad" /></a> 
                        <p>With Grandad</p> 
                                            </li> 

                    <li> 
                        <a href="http://lexie.myredmonkey.co.uk/index.php?/gallery/image_full/4/"&gt;&lt;img src="http://lexie.myredmonkey.co.uk/img/gallery/May2010/on-the-mat_thumb.jpg"  class="border" width="200" height="200" border="0" title="On the mat" /></a> 
                        <p>On the mat</p> 
                                            </li> 
                    </ul><ul id="galleries"> 
                    <li> 
                        <a href="http://lexie.myredmonkey.co.uk/index.php?/gallery/image_full/5/"&gt;&lt;img src="http://lexie.myredmonkey.co.uk/img/gallery/May2010/swimsuit_thumb.jpg"  class="border" width="200" height="200" border="0" title="The swimsuit edition" /></a> 
                        <p>The swimsuit edition</p> 
                                            </li> 
                    </ul> 

css:

    #galleries li
{
    width:225px;
    display:inline-block;
}
#galleries li p
{    
    margin:10px 0 20px 0;
}

Here's a link to the page for reference (nb. site is still in debug mode!!!)

http://lexie.myredmonkey.co.uk/index.php?/gallery/category/C4/

Apologies about the formatting of this answer!