CSS Gallery

29 May 2008 css

Building a image gallery always poses a problem: how to show the thumbnails. If you don’t need the captions it’s easy: insert a bunch of img tags and give them some nice styles. But to insert the caption under every thumbnail you must enclose the two elements (thumbnail and caption) inside a box and then manage this box. The solution most widely used is to set the property float: left to the box.

CSS Gallery demo

View the demo gallery

What’s wrong with float: left

Sometimes galleries builded with float: left are good, but they suffer some drawbacks that make we regret the tables:

  • can’t be centered in the page;
  • in liquid layouts it’s easy to make some blank spaces when resize the browser window;
  • the boxes must be all of the same height or you can obtain a stairs effect due to the float, and this means poor flexibility for the captions.

The ideal would be to have an element with the same characteristics of tag img, so it can be managed like text (centering, vertical align on base line) but having the same feature of a block (became a container for other elements). The CSS property for this element exist and is display: inline-block.

Features of inline-block

The property display is part of the Visual formatting model in the W3C spec for CSS 2.1. It permits to do what its name suggest: build a element that behaves internally like a block (as a div) and externally like an inline element (text, span). For the purpose of a gallery it seems the solution to all problems. It seems…

Diversity of browsers

inline-block is treated in different manners by the various browsers, and some even know it (Quirksmode: The display declaration). To set the box in a consistent way you must write a few more instructions:

  • for the good browsers
  • for Gecko (Firefox and company)
  • for Internet Explorer

A real example

In the example will be built a gallery with the sequent features:

  • fluid layout
  • the entire gallery will be centered in their container
  • captions of any lenght

Every single element of the gallery will be set like this schema (see figure):


Gallery item scheme

  • thumbnails maximum dimension 100px
  • container of thumbnail (class .thumb) 140 × 140px
  • 5px margin to the div (class .box) containing thumbnail and caption

Note that the thumbnail will be centered orizontally and vertically inside .thumb to accomodate images in portrait or in landscape.

The HTML code for every single box is very simple:

<div class="box">
  <div class="thumb"><span></span><img src="thumbnails/04310090.jpg" width="77" height="100" alt="La dama con l'ermellino" /></div>
  <div class="caption">La dama con l'ermellino</div>
</div>

It’s easily spotted the presence of a blank span. It’s the base for a Internet Explorer hack. We need it later to center vertically the thumbnail inside the .thumb block.

I’ve read many sources (tryng to undertand) and came to a solution. Below are listed and explained the styles used. For clarity and brevity I removed all aestethic styles for borders and backgrounds, leaving only the layout.

The .box class

.box {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  width: 140px;
  margin: 5px;
  vertical-align: top;
}

Only for Internet Explorer we must add:

.box {display: inline;}

display: inline-block serves for all browsers who understand it (like Opera), for browser based on Gecko (like Firefox) we must insert two instructions a bit exotic

display: -moz-inline-box
-moz-box-orient: vertical

The good news is that the latter two are proprietary instructions of Gecko rendering engine and will be completely ignored by other browsers. As always, for Internet Explorer (at least up to version 7) we must provide display: inline trough conditional comments. Without this code IE will treat the .thumb like a simple block.

width: 140px and margin: 5px are optional and you can personalize for your taste. The only thing to remember is to make enough width to contain the thumbnails.

vertical-align: top it’s needed by Opera. Without this code, in presence of different lenght captions, Opera will align the boxs to the bottom (see the following image). This happens even forcing the vertical dimensions of all the elements and setting overflow: hidden to the .caption class!

Opera bug

The .thumb class

.thumb {
  width: 140px;
  height: 140px;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid #aaa;
}
.thumb * {
  vertical-align: middle; 
}

We must set the height of .thumb (I choose a square) because the thumbnails inside will be vertically centered. Vertical centering in CSS it’s difficult if compared to the table cells. The display: table-cell property makes the .thumb behaves like a table cell, so now we can use vertical-align: middle (same as valign="middle" in table cells).

vertical-align: middle on .thumb * it’s a little hack for Internet Explorer. Without this hack IE will align the thumbnais to the bottom.

For Internet Explorer we must also provide separately this styles:

.thumb {display: block}
.thumb span {
  display: inline-block;
  height: 100%;
  width: 1px;
}

IE does not understand very well display: table-cell and will not apply vertical-align: middle. We must set .thumb like a block and apply the other rules to a blank span we have seen before in the HTML code.

The .caption class

This class is optional. You can replace it with a simple p and let the text flow in the .box.

Demo Gallery

The example described can be viewed in the demo gallery. The layout it’s left fluid (the most difficult situation) to verify the behaviour resizing the browser window. There are some very long captions to highlight the absence of stairs effect afflicting the float solution.

Compatibility

This solution has been verified on a Windows system with the following browsers:

  • Internet Explorer 5.5
  • Internet Explorer 6
  • Internet Explorer 7
  • Opera 9.27
  • Firefox 2.0.0.12 (Gecko 1.8.1.12)
  • K-Meleon 1.5.0beta (Gecko 1.8.1.14)
  • Safari 3.1.2 (WebKit)

Through the service made available by Browsrcamp I tested the gallery with Safari on Apple Mac OS X. In the image there is the screenshot of demo page at 800px: it seems ok (click to enlarge).

Safari on Apple OS X
Test with Browsrcamp

Reference

Google is your friend, but I really want report the great resource CSS tests and experiments by Bruno Fassino, for the quantity and quality of published material.