Crear listas con miniaturas (Para resaltar secciones, patrocinadores, etc)

Una bonita técnica para aprovechar mejor nuestro sidebar, cuando necesitamos en el resaltar una sección en especial, inclusive cuando se trata de nuestros patrocinadores. La idea es crear una lista de enlaces formado por un título, una descripción corta, y la imagen miniatura. Ver demo

PLAIN TEXT

CSS:

dl {
width: 250px;
font-size: 80%;
}
dt {
float: right;
width: 190px;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
dd {
margin: 0 0 15px 60px;
color: #666666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
dd.image {
float: left;
margin: 0;
}

PLAIN TEXT

HTML:

<dl>
<dt><a href="http://www.elserver.com/">El Server</a></dt>
<dd class="image"><img src="icon_css.gif" alt="" width="50" height="50" /></dd>
<dd> Hosting WEB 2.0 que sobrepasa todas las expectativas... </dd>
<dt> <a href="http://POOLDIGITAL.net">POOLDIGITAL </a> </dt>
<dd class="image"><img src="icon_html.gif" alt="" width="50" height="50" /></dd>
<dd>Empresa de diseño web. Brasil. </dd>
<dt> </dt>
<dt><a href="http://www.spiga.com.mx/">SPIGA </a></dt>
<dd class="image"><img src="icon_accessibility.gif" alt="" width="50" height="50" /></dd>
<dd> Diseño Web Profesional Desarrollamos blogs, portales, podcast, e-mail marketing, etc… </dd>
</dl>