Image gallery: how to control the layout

To control alignment of images and labels in a gallery in several columns and row, tricks must be used to maintain compatibility with all browsers, including older versions of Internet Explorer.

The images are placed in a list with the tags <li> and the CSS display: inline-block property let them to be juxtaposed and not aligned vertically in a list.

But to avoid overflow, and the destroying of the layout when images or text require extra space, we must tap into the resources of style sheets as they are defined by the standard.

HTML code:

<ul class="gallery">
  <li><img ...><br>text</li>

A new list is used for each row of the gallery.

CSS code:

.gallery li
display:inline-block; width: 158px;
min-height: 170px;
vertical-align:top; text-align:center;
*display: inline;
_height: 170px; border:none;



The following code defines a framework for each image with its label, with the inline-block option, which is part of CSS 2:

vertical-align:top; text-align:center;

The extra commands are for compatibility with older versions of Internet Explorer.

To replace inline-block that is not supported in Internet Explorer (before version 9), we use two properties:


Placing an asterisk before "display" ensures that the property will be recognized by Internet Explorer 7 only. The zoom property is ignored by other browsers and indicates that the image should be displayed fully and this has consequential effects on the layout.

And for compatibility with IE6:

_height: 170px;

The underscore code is only recognized by this browser and the property therefore only accounts for IE6, it replaces min-weight that is not yet implemented in this version.

Adding a border

You can change the border property in option that allows creating a border, with for example:

 border:1px solid gray; 

See also