Photo thumbnail gallery (with captions)

Get Started
1

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!

Greg

2

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>
  <div class="caption">
    Some Image
   </div>
</div>

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

3

Hi,

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.

4

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.

Greg

5

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.