Posicionando imagens ao lado de textos (os editores chamam-a de "olho") usando a técnica de "listas de definição"

Uma dúvida que eu tinha: Como deixar deixar imagens ao lado de textos, sem usar tabelas?

Para resolver esse problema utilizei a técnica de "lista de definição", no qual usa-se as tags <dt>, <dl> e <dd> com o auxilio de CSS.

A tag dl vem do inglês definition list e significa lista de definição.

A tag dt vem do inglês definition term e significa termo de definição.

A tag dd vem do inglês definition description e significa descrição de definição.

O uso combinado dessas tags permite obter resultados similares ao das tags ul e li de listas exceto pelo marcador.

Como exemplo, utilizarei o seguinte código:

<dl class="destacar">
<dt> <img src="http://www.miltonsylvio.com/img/mr-been.gif" width="96" height="96" />Titulo do Texto</dt>
<dd> Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...</dd>
</dl>

Agora o código CSS:

dl.destacar {
margin: 15px 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}

dl.destacar dt img {
float: left;
margin: 0 10px 0 0;
padding: 0 3px 3px 0;
}

dl.destacar dd {
margin-left: 110px;
font-size: 90%;
line-heigh:1.5em;
color:#666;
}

dl.destacar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

dl.destacar dt {
margin: 0 0 .5em 0;
font-famlily: Georgia, Times, Times New Roman;
font-size: 140%;
color: #1f328b;
}

Abaixo, o resultado:

Titulo do Texto

Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...

É isso aí!