This tutorial is the fourth part in a series on creating "teaser thumbnail lists" with CSS. Teaser thumbnail lists are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. In Parts 1, 2, and 3, you've learned how to build teaser thumbnail lists from both definition lists and unordered lists and learned a couple different ways to style them. However, so far all of the lists created have been fixed in width.
In this tutorial, you'll learn how to create a teaser thumbnail list that can expand and contract in width so that it can be used in fluid or liquid sites. As with the other lists, we'll use floats to accomplish the layout.
Note: This tutorial has been updated as of 5/10/2007. You can view the updated tutorial
here.
The Create a Teaser Thumbnail List Series:
Create a Teaser Thumbnail List Using CSS: Part 1
Create a Teaser Thumbnail List Using CSS: Part 2
Create a Teaser Thumbnail List Using CSS: Part 3
Create a Teaser Thumbnail List Using CSS: Part 4...