nigelbuckner.com

2 example arrangements for fixed width thumbnail galleries

There are many ways of styling a page layout for a gallery of thumbnails. The two methods illustrated here are a good place to start.

By far the easiest way to arrange thumbnails is to make them all the same size and orientation.
Calculate the amount of spacing around the images by subtracting the total width of the images from the total width of the container.

For simplicity, links have not been added to the images.


Gallery 1 - simple, no caption

One container <div>. The images are simply inserted into the container.
Images are all float: left. Spacing is shared between the container and the images
e.g. the container has padding left and top and the images have margin right and bottom.

The HTML for gallery 1

<div id="gallery_1">
<img src="images/image_1_th.jpg" alt="image 1" width="190" height="142">
<img src="images/image_2_th.jpg" alt="image 2" width="190" height="142">
<img src="images/image_3_th.jpg" alt="image 3" width="190" height="142">
<img src="images/image_4_th.jpg" alt="image 4" width="190" height="142">
<img src="images/image_5_th.jpg" alt="image 5" width="190" height="142">
<img src="images/image_6_th.jpg" alt="image 6" width="190" height="142">
<img src="images/image_7_th.jpg" alt="image 7" width="190" height="142">
<img src="images/image_8_th.jpg" alt="image 8" width="190" height="142">
</div>

The CSS

#gallery_1 {
background-color: #CCCCCC;
width: 920px;
padding-top: 40px;
padding-left: 40px;
}
#gallery_1 img {
float: left; /* removes whitespace between images */
margin-right: 40px;
margin-bottom: 40px;
}
/* a pseudo selector to make the gallery_1 container clear the left floats on images */
#gallery_1:after {
content: "";
display: table;
clear: both;
}


Gallery 2 - with captions

Similar to Gallery 1 except that images do not have a style but are instead placed inside a <div> tag.
This makes it possible to place a caption underneath each image.
In this case, margin right and bottom is applied to the <div> for each image rather than to the image itself.

The HTML for gallery 2

<div id="gallery_2">
<div class="thumb_box"><img src="images/image_1_th.jpg" alt="image 1" width="190" height="142">Caravan</div>
<div class="thumb_box"><img src="images/image_2_th.jpg" alt="image 2" width="190" height="142">Diana</div>
<div class="thumb_box"><img src="images/image_3_th.jpg" alt="image 3" width="190" height="142">Pony</div>
<div class="thumb_box"><img src="images/image_4_th.jpg" alt="image 4" width="190" height="142">Otter</div>
<div class="thumb_box"><img src="images/image_5_th.jpg" alt="image 5" width="190" height="142">Stll Life</div>
<div class="thumb_box"><img src="images/image_6_th.jpg" alt="image 6" width="190" height="142">Flask</div>
<div class="thumb_box"><img src="images/image_7_th.jpg" alt="image 7" width="190" height="142">Pinnocchio</div>
<div class="thumb_box"><img src="images/image_8_th.jpg" alt="image 8" width="190" height="142">Still Life</div>
</div>

The CSS

#gallery_2 {
background-color: #CCCCCC;
width: 920px;
padding-top: 40px;
padding-left: 40px;
}
.thumb_box {
float: left;
margin-right: 40px;
margin-bottom: 22px;
width: 190px;
}
/* a pseudo selector to make the gallery_2 container clear the left floats on thumb_box */
#gallery_2:after {
content: "";
display: table;
clear: both;
}


nigelbuckner.com