Image captions in Wordpress using CSS

I'm looking for a solution to the common problem of including a caption beneath the images on my Wordpress posts.

I have found this solution:
<div class="caption">
<img src="image.gif" />
caption text here
</div>

In your stylesheet:

div.caption {
width:auto;
float:left;
font-size:0.8em;
text-align:center;
}

But I was wondering if there is a way to achieve this by stylesheet alone; i.e. provide that each image in the post allow for a caption which will format as if it belongs to the image. The reason is that Wordpress converts <div to <p for some reason in posts.


Any CSS whizzes got a slick trick for this?

 

Well, if turdpress is changing DIV to P, just use P - it too is a display:block property. Zero the padding and margins on it 'just to be sure'.

Oh, and that width:auto is unneeded, that's the default behavior on block level elements anyways.

<p class="caption">
<img src="image.gif" />
caption text here
</p>

In your stylesheet:

p.caption {
width:auto;
float:left;
font-size:0.8em;
text-align:center;
margin:0;
padding:0;
}

should be functionally identical.

 

Thanks for the code!
It works...except that the caption is now appearing just to the right of the image pushing all of the text over and messing up the alignment.

Any tips on getting the caption to appear just below the image?

 

Adding a br tag should fix things... try it.

<p class="caption">
<img src="image.gif" />[B]<br />[/B]
caption text here
</p>

Code (markup):

 

I was really hoping that that would work, but it didn't
just put the text a little lower, but still floating next to, not under the image...

Any other advice?

 

Then just use this:

<p class="caption">
<img src="image.gif" />
[B]<div>[/B]caption text here[B]</div>[/B]
</p

Code (markup):

The Div tags should force it underneath the image.

 

OK... except that when I save the post, WP changes the <div> tags to <p> so the caption tag gets treated like a new paragraph.

I'm thinking that there may be an attribute that I can add to the stylesheet to float the text caption directly below the image... any tips?

 

lol, wordpress ftw.

Well I found a solution, although it requires some changes to be made.

Here's the example I used:
http://www.topxml.com/css/css_property_clear.asp

Essentially this is what your HTML should look like:

<p class="captionimg"><img src="image.gif" /></p>
<p class="caption">caption text here</p>

Code (markup):

And your CSS:

p.captionimg {
float:left;
}
p.caption {
clear:left;
}

Code (markup):

Those are the essentials, add all your text formating and such to this. However, what I should point out is that there is a much simpler solution to this problem, but is only applicable if the size (primarily the width) is the same for all the images that this code is applicable to. If that's the case, if you specify the width of the container to the same width as the image, the text will be pushed underneath it. However, if your images vary in width, then you'll need to use the code above.

 

We're almost there !
Using GWiz's latest version, the captions are below the image now, but the text of my article is no longer wrapping around the images with captions.
The paragraph which should be next to the image is being pushed below it!

What next?

 

Gwiz's has the problem that they floating container is not around both items.

Addng a BR or extra tags is NOT necessary either if you know enough about CSS. All you need to do is set the image to display:block, and the text will be forced to a new line.

<p class="caption">
<img src="image.gif" alt=""/>
caption text here
</p>

p.caption {
float:left;
font-size:0.8em;
text-align:center;
margin:0 8px 8px 0;
padding:0;
}

p.caption img {
display:block;
margin:0 auto;
}

I set the image to center via margin 'just in case' your caption forces the P width wider than the image. (It shouldn't, but it might).

I also yanked the width:auto as being a float left that should do exactly two things... and Jack left town, took his **** with him.

Though GWiz's first advice with the <BR>eak should have worked - if it didn't I would make sure you don't accidentally have the image itself set to float:left, which could cause a whole host of issues.

 

This solution didn't work, either. The caption was still being showed beside the image and shoving the text of the article over.

I don't have any extra attributes set for the images in my stylesheet.

For the most part, though, I am floating the image, alternating to the left and right, beside the text. Each image is an active link and I want there to be an active caption below each image directing viewers where they are going.

editroblem solved! I'll post the code later for those who want to see it, got to go right now. Thanks, everyone for your help!

 

To get the caption working as I wanted, I added the following code to my stylesheet:

and all I need to add to the HTML is:

works perfectly.
I found the info I needed for this solution at this blog
(the color is set to black because thats my background color and the width set to 125 because, for the most part, that is the size of the images that I use. Anyone using this code may need to adjust for different sized images and colors.

Anyone know how to get the width to inherit the width of the image it encloses regardless of the image size?
I tried width:inherit as a shot in the dark...didn't work
Any tips?

 

Well as I stated previously, if you used a fixed width, it would force the text underneath the image assuming the width of the container is the same as the width of the image. That's why I had asked you if your images were the same size.

 

I am using a fixed width, now (125px).
But it would be better if the width could be tied to the width of the image so that I could use images of different sizes. More research...

Anyway, looks like I've got it nailed for now-only 2 days this time.

Thank you for all of your help. You run a tight ship in the CSS forum.