Vertical thumbnails

How to align vertically thumbnails with accompanying text?

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

Demonstration

• ---

• 

  Description

  Video on the Web. Two formats, two competing codecs:
  - H 264 supported by Apple.
  - Webm, initiated by Google and supported by Mozilla.

  The first is a proprietary format and requires fees for commercial videos.

  The second format is free and open to all.

• 

  Description

• 

  Description

• ---

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

• The Web design.