[d3mcfadden]

Hello I am redesigning my portfolio and want the actual portfolio peices to look like the attached image. I have having a hard time figuring out how to strucally mark this up. I want there to be an unordered list with list items (each portfolio peice) - this will be the thunbnail images for the piece. I also want each peice to have a description inline and to the right of the image.

mark up I have now:
<ul>
<li>piece 1</li>
<p> piece 1 description </p>
<li>peice 2</li>
<p> piece 2 description </p>
<li>piece 3</li>
<p> piece 3 description </p>
</li>

---------
structually this makes sense to me but I cant get it to work out so that the paragraph is floated to the right of the iamge. Can someone please help.

[smallbeer]

no, structurally it makes little sense.

maybe use a definition list

<dl>
<dt><img /></dt>
<dd>
<p>
Some shite here.
</p>
</dd>
<dt><img /></dt>
<dd>
<p>
Some moreshite here.
</p>
</dd>
</dl>

and the css. something like this.

dl {
width: 400px; /* or whatever */
float: left; /* I like the 'floating everything solves clearing problems' idea.  you might not need it.
}

dl dt {
width: 100px; /* again whatever as long as the dt and dd add up to the width of the dl */
float: left;
}

dl dt img {
display: block;
}

dl dd {
width: 300px; /* see above */
float: right;
}

[d3mcfadden]

nice man, thanks a lot. I forgot about def lists, well to be honest Ive never used one. Thanks for the insite

[d3mcfadden]

I tried your code with the def list, but I can't seem to get the paragraph to float right of the image. any more suggestions? attached is what I got.

[Dusteh]

Surely some positioning CSS would sort that out? Float the images to the left? Bump the paragraphs up the page a little... something like that?