The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Photo Captions

Hi - I have several pages on my site with photos (and want to add some more). I have them floated either right or left with a border just as I want, but I cannot for the life of me get a caption to stick to the bottom. The site is http://www.thanetdf.org.uk

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p.caption{
float:right;
text-align:center;
}
</style>
</head>
<body>
<p class="caption"><img src="logo.gif" width="273" height="53" alt="test" /><br />
Small Caption Here</p>
<p>This is the content : This is the content : This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :This is the content : This is the content :</p>
</body>
</html>

Just float the wrapper and not the image and then use a break to put the caption underneath. You can add borders and padding to the image if you want by targeting the image.

You can't however have the text auto wrap within the image width inless you specify an exact width.

Hi - yes I saw that and I am sure it does work - what I wondered is something else is preventing the image and caption floating. I am trying to put a caption inside the border underneath the photograph. http://www.thanetdf.org.uk/news.html

<p>One of the first issues that Thanet Disability Forum has tackled is that of inconsiderate drivers who park their cars in bus stop clearways.</p>
<p class="caption"><img src="http://www.thanetdf.org.uk/images/timjay.jpg" alt="car parked in bus stop clearway" width="200" height="150" /><br />Caption</p>
<p>< Thanet District Council has had the kerbs of many bus stops raised to enable not only people in wheelchairs to access the bus, but other passengers including elderly persons and those with children in pushchairs. If a driver parks their vehicle in the bus clear way the bus is unable to stop adjacent to the raised kerb. This leaves disabled passengers stranded unable to disembark or get onto the bus. </p>

You just have to make sure that you over-ride any existing styling on the p tag otherwise it cascades through.