Vertical thumbnails

How to align vertically thumbnails with accompanying text?

A simple method: use a list and an appropriate style sheet ...

Demonstration


HTML code

<ul class="vgallery">
  <li>
    <img src="" >
    <p>Description</p>
  </li>
  <li>
    <img src="" >
    ...etc...
</li>
</ul>

CSS code

Stylesheet for the list:

.vgallery
{
padding:0;
margin:0;
}

Removing the bullets:

.vgallery li
{ list-style:none; }

Aligning the vignette on the left:

.vgallery img
{
margin:4px;
float:left;
}

Aligning the next item on the left:

.vgallery li
{
list-style:none;
margin-left:0;
clear:left;
}

The clear attribute refers to the attribute float of the image, which can cause a shift of the text.

Aligning the text vertically is accomplished by applying a style to paragraphs:

.vgallery p
{
margin-left:132px;
}

The value of the margin depends on the width of the images.

The complete CSS code:

.vgallery
{
padding:0;
margin:0;
} .vgallery img
{
margin:4px;
float:left;
} .vgallery li
{
list-style:none;
margin-left:0;
clear:left;
} .vgallery p
{
margin-left:132px;
}

After the last <li> list item and depending the height of the image, since the image is aligned with float:left, you will need another newline. Add a <br> tag:

<br style="clear:left" />

In the demo, one more <li> tag has the same effect.

More