inline photographs, with captions

[danny]

Can anyone recommend a way of doing inline photographs and captions in CSS? For my previous travelogues, I've been using HTML like

<TABLE ALIGN="right" HSPACE="5"><TR> 
<TD WIDTH="180"> 
<A HREF="p/strangler-fig.jpg"><IMG SRC="t/strangler-fig.jpg" WIDTH=180 HEIGHT=240></A> 
<BR><SMALL>a strangler fig</SMALL> 
</TD> 
</TR></TABLE>

In particular, how do I implement the <BR> and the HSPACE (to ensure white-space between the photo/caption and the main body of the text?

[mirthe_v]

Something like this?

<style type="text/css"><!--
.photo {float: right}
.photo img {margin-bottom: 5px}
.photo p {font-size: 80%;}
--></style>

<div class="photo">
<img src="t/strangler-fig.jpg" alt="" width="180" height="240" border="0">
<p>a strangler fig</p>
</div>

[ukgimp]

http://www.alistapart.com/stories/practicalcss/

may give you some ideas

[edited by: Nick_W at 10:21 am (utc) on Oct. 1, 2003]
[edit reason] de-linked [/edit]