Photo thumbnail gallery (with captions)

Not sure if this should be here or in graphics, but think it is more a site problem than image.

I’m trying to put together a webpage that has a series of pictures (12 in all) that I would like displayed in a nice grid (3 across 4 down). Using CSS, I can get it all setup, but when I attempt to put captions under them the layout gets all messed up. If I wanted pictures with captions in a grid like that would I be better off doing it using tables?

Thanks for any advice, doing my best to start designing using standards, just not sure what standard to follow here!


Try something like this

.wrapper {
float: left;
margin-right: 5px;

.imageHolder {
height: 100px;

.caption {
height: 30px;

<div class="wrapper">
  <div class="imageHolder">
     <img src="some-image.jpg" alt="Some Image"/>
  <div class="caption">
    Some Image

of course you need to adjust the heights to fit your needs :slight_smile:


There are many ways to do this and all depend on the criteria that you want.

For elements of a set width I would do something like this example (just view source). The reason they are not floated and use display:inline-box instead is to allow for the caption to wrap to two lines without snagging in the way that floats would.

Thank you Paul, that worked out great, took a little bit more tweaking (and still have more to do) but it’s really close now and I can figure it from here (I hope).

I tried your solution Scallio and while I’m sure it’s workable, there must have been something else about my code that was causing it to not list in a table like I wanted. Instead it was just a straight column down the left hand side.

I appreciate all the help though as every solution enlightens me to other features and functions and how to put them to use in the future.


I was looking for such a photo gallery webpage. Thanks a lot Paul.

I need to customize it and add it to my website template.