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 principle

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 implemented in browsers.

HTML code 

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

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;
  padding:4px;
  zoom:1;
  *display: inline;
  _height: 170px;
  border:none;
}

Explanations

Standard code

  display:inline-block;
  width:158px;
  min-height:170px;
  vertical-align:top;
  text-align:center;
  padding:4px;

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

Compatibility with Internet Explorer

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

zoom:1;
*display:inline;

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;

Demonstration

Voir aussi