Tableless photo album

December 2003

How i replaced my standard 3 column wide table based photo album with a pure CSS one...

My tableless photo album

Why?

HTML tables were designed for tabulating data not layout.

CSS based layout allows adaption for different size screens, i.e. a large monitor could be able to display more than 3 colums simultaneously, whilst a handheld device may be only capable of showing one column. Using CSS means the columns will dynamically adapt to fit the viewing window.

Details

Each photo entry consists of the actual photo and a caption. i am fully aware that the caption span class is not strictly necessary, however i like to differentiate between the photo class, which is used purely for layout and the actual formatting of the caption text.

<div class="photo">
  <a href="photo.jpg">
    <img src="photo_thumb.jpg" alt="[description]" />
  </a>
  <br />
  <span class="caption">
  Caption text
  </span>
</div>
  

The relevent CSS is as follows. This makes assumptions about the sizes of the thumbnail images. float : left causes each div to be placed to the right of the previous one, until the screen width has been exhausted at which time a new row is started.

div.photo
{
	float : left;
	width : 150px;
	height : auto;
	text-align : center;
}

span.caption {
	font-size : 0.8em;
	font-style : italic;
}

Any text placed after a photo div tag will be rendered directly after it with no line break. To ensure a line break, use the either <div style="clear : both"></div> or alternatively place the clear : both setting in any elements following the album, in my case this was only the footer class.