Photo album formatting proof of concept

This page demonstrates how to show thumbnails of photos with HTML and CSS. The sequence of thumbnails are automatically broken into lines by your browser so that as many are shown in a line as can fit in your window. Short captions are shown under each photo, long descriptions are shown under each line of photos. If you change the width of your browser window, the images are reflown. All this is achieved using only CSS, without any Javascript or similar.

This works in most browsers, but does not work in MSIE 7 or older versions of Konqueror. Naturally, the method degrades gracefully even to non-CSS browsers, so you can still view the images and descriptions there, but then each photo is shown in a separate row with the description immediately after.

Some further work is still needed. Specifically, I wonder whether there's a good way to align the bottom of images no matter how high the image and caption is.

$hja7605$

AAAAAAAA

A: description of photo

$hja7605$

BBBBBBBB

B: some description of photo

$hja7605$

CCCCCCCCCCCCCC

C: some more description of photo

$hja7605$

DDDD

D: some description of photo

$hja7611$

EEE

E: some description of photo

$hja7605$

FFFFFFF

F: some description of photo

$hja7611$

GGGGGG

G: some description of photo

$hja7611$

HHHHH

H: some description of photo

$hja7605$

IIIIIIII

I: some description of photo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non eros eu lacus fermentum accumsan eget commodo turpis.

$hja7605$

JJJJJ

J: some description of photo.

$hja7605$

KKK

K: some description of photo.

$hja7611$

L: some description of photo.

$hja7605$

MMMMM

M: some description of photo. Quisque nec lorem non erat mollis cursus ac in velit. Sed non metus odio. Proin faucibus, elit quis aliquam congue, orci quam blandit dolor, a scelerisque mi dui at diam. Aliquam ornare turpis scelerisque velit aliquam ut dictum massa dapibus.

$hja7605$

NNNNN

N: some description of photo. Aenean porta turpis nisi, at ultricies massa. Vestibulum non nulla ante. Ut neque magna, adipiscing a dapibus vitae, aliquam eget nisi.

$hja7605$

OOOOO

O: some description of photo. Donec fringilla euismod lorem vitae feugiat. Phasellus imperdiet augue pellentesque lorem hendrerit bibendum.

$hja7605$

PPPPP

P: some description of photo.

$hja7605$

QQQQ

Q: some description of photo.

$hja7605$

RRRRRRRRR

R: some description of photo.

$hja7605$

SSSSSSSSSSSSSSS

S: some description of photo. Aenean in dui ut felis cursus consequat id nec odio. Aliquam nisl tellus, vehicula vitae imperdiet ultrices, dictum a ligula. Mauris non quam nec risus facilisis fermentum at in sapien. Cras et magna ultrices massa aliquet faucibus. Fusce rutrum nunc vel neque ornare non faucibus velit adipiscing. Nam dignissim pellentesque molestie. Donec et arcu et lacus vulputate elementum. Vestibulum tincidunt, tellus sed vehicula congue, purus sapien pharetra ante, a congue quam eros vitae dui. Praesent porta condimentum congue. Maecenas id ligula est. Proin laoreet scelerisque nisl quis vehicula. In tincidunt elementum nisi vitae vestibulum. Praesent non purus id velit commodo mollis. Morbi adipiscing ipsum eu elit imperdiet pharetra. Suspendisse nibh mi, facilisis sed sagittis aliquet, vestibulum id risus.

$hja7605$

TTTTT

T: some description of photo.

$hja7605$

UUUU

U: some description of photo. Vestibulum odio neque, interdum et placerat fermentum, porttitor vitae leo. Suspendisse eget metus felis. Nulla ut metus id nisi viverra posuere. Vivamus sed massa eu tellus convallis porta sit amet ac erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam enim erat, rhoncus vitae molestie at, suscipit id nisl. Donec bibendum velit non dolor rutrum auctor. Mauris scelerisque nunc orci, eget adipiscing nisi. Nunc euismod imperdiet leo, eget lacinia nisi fermentum vel. Quisque felis sem, lacinia nec porta sodales, molestie vitae lorem. Fusce eu orci non diam tempus ornare. Nam malesuada, orci vitae convallis elementum, leo odio posuere ante, a pellentesque ligula lacus vitae nisl. Nunc at turpis massa, vel mattis nunc. Praesent iaculis elit vel justo rutrum a facilisis lorem euismod.

$hja7605$

VVVVVVVVVVVV

V: some description of photo. Duis orci ante, interdum sit amet tristique gravida, sodales vestibulum sem. Praesent malesuada porta ligula ac feugiat. Suspendisse quis mauris sit amet elit elementum dignissim eget convallis mauris. Quisque fermentum auctor mattis. Fusce eget tellus metus, nec condimentum nisl. Aenean ut ante nulla. Nullam convallis rutrum diam, vitae commodo risus tristique non. Donec mollis placerat libero, sit amet feugiat nulla hendrerit sed.

$hja7605$

WWWW

W: short description.

$hja7605$

XXXXXX

X: some description of photo. Vivamus porttitor, felis ut accumsan bibendum, quam orci vehicula justo, id tempor odio urna sit amet lorem. Quisque eu lacus vel nibh lacinia rutrum at at elit. Proin eget leo mauris, eget convallis felis. Donec sit amet leo non velit tempor tempor. Etiam sodales enim ut elit lacinia consectetur.

$hja7605$

YYYY

Y: some description of photo.

$hja7605$

ZZZZZ

Z: some description of photo.