Definition list to list products?

I’m wanting to list some products and am wanting each product to be listed in a line, similar to the way Google Shopping lists theirs, where there is an image, then some text, then a price at the end.

I’m thinking a definition list would probably be my best bet, no?!


<dl>
<dt><img src="\\image.jpg" /></dt>
<dd><a href="#">Link to Product</a></dd>
<dd>$19.99</dd>
</dl>

I can get them in a line like I’m wanting using this CSS:


dl { display: block; margin-bottom: 12px; }
dt,dd {
	margin: 0; padding: 0;
	display: inline;
}

Now my only problem is that the text displays at the bottom of DL list. Is there a way to move the text to the top of maybe the center?

You might find this useful:

(also here: http://www.pmob.co.uk/temp/definition-list2.htm)

Ralph,

That was DEAD on what I am looking for and I’m glad to find someone else thinking of using the definition list in the same way I was.

Thanks so much!