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...

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:


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