need help floating image to the left of dt, dd tags

[LoopHoles]

I have the following code for a item description list (<dt>):

<dl>

    <dt class="thumbnail"><img src="itemimg.jpg" /></dt>
    <dt>Item Name/Title</dt>
    <dd>Item description, definition, plus other info.</dd>

    <dt class="thumbnail"><img src="item2img.jpg" /></dt>
    <dt>Item2 Name/Title</dt>
    <dd>Item2 description, definition, plus other info.</dd>

</dl>

I'd like the image to be left with the item name and description flowing to the right of it. I don't mind changing tags if that's what it takes.

Two other requirements: 1. that the code stay standards compliant, meaning only <dt> and <dd> are allowed immediately inside the <dl> tag, 2. that the positioning be done with css.

anyone have a clue? let me know if you need more details to think out a solution.

TIA

 

[Rower_CPU]

Sorry I missed this earlier.

Here's the CSS:

dl {
 width: 400px;
}
dt.thumbnail {
 float:right;
 width: [i]imagewidth[/i].px
}

You'll need to specify a width for the floated element.

 

[LoopHoles]

Thanks. I tried your method after seeing the post, but it didn't work for me. It may have something to do with the other boxes around the list or other styles applied.

Anyway, since I was in a hurry, I just used an unordered list <ul> and placed the image inside <li> floated left of <h5>, and paragraph tags instead of a description list. so now it's more like:

<ul>
	<li><img src="img.jpg" alt="image" />
	<h5>item title</h5>
	<p>description</p>
	</li>
</ul>

 

[Rower_CPU]

Glad you found something that works.

In the future, it would be great if you could post the full page code, or just link to the page. That way we can see what's going on in context.