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, and their older versions.

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>
  <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;
}

Demonstration

Explanations

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

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

The extra commands are for compatibility with older versions of browsers.

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