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...
<ul class="gallery"> <li><img ...><br>text</li> <li>... </ul>
A new list is used for each row of the gallery.
display:inline-block; width: 158px;
_height: 170px; border:none;
Patents in the U.S., a broken system.
Second Life. Knowing Web players, their products
Entering a fractal world, a graphic demonstration.
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;