Captioning Images Using css

I am not any kind of coder, but as I've said in the past, I know a little html and I'm not afraid to use it. And, a small caution: if you use this method, depending on your template, you may need to also use one of the line-spacing fixes.

Island Freeman

This is a demo of captioning images using css. I will use two images posted (and captioned) in my :Miami post.

So, the first captioned image is in. The method is to wrap the image code plus the caption in an outer <div>, with the caption in a styled inner <div>. You can see I changed the font for the captions. If the red border is present, it's only to highlight the outer <div>. Also I may be tweaking a little, so it may change occassionally. Also note the image is positioned slightly above the outer div; I did a -3px top margin on the image to control where the wrap ended. That's one of the things you play with to make a post look the way you want.

Island Chaffee-Belmont Pier on left. Pretty annoying slipping an image right in the middle of the story, isn't it?

This one (above) demos a longer caption. The text could be centered, but that is a personal preference. In this case the outside <div> has text-align:center and the caption <div> has text-align:left with the margins adjusted to give it a balanced look.

Island Freeman — this is a centered multi-line caption on the same picture as above

Margins set in the outer <div> control the spacing to the surrounding text. I set the outer <div>s width to the width of the image and then set the image margins and padding to 0. All of that can be easily adjusted to accomodate image borders and even complete outer <div> borders.

When I put the second "Freeman" image in I had to adjust the outer <div> bottom margin to provide adequate spacing, so tweaking is definately needed.

Island Freeman — this is a left aligned, mulit-line caption on the same picture as above. The top margin of the inside <div> gets adjusted to move it down.

Wow, a side-caption — how about that! I added a <div style="clear:both"> after the image/caption <div>, but that's to be expected. I had to add a margin to the botom of the image style to get some spacing to this paragraph.

To me, all of this is workable. The best way to to keep this reasonable is to have a collection of code saved in a text file and paste it in as required, but that's the way I work anyway.

You can view and save the source for this post to see how it works, but here's the code for a couple of the images.

I've broken it into three sections to add explainations, but in-service it is all one line of code. You can't copy and use it without modification, because it is a three-row, two-column table created in css, i.e., it looks like a table, but it's not.

Island Chaffee-Belmont pier, the wide one, first.

<div style="clear:both; display:block; width:400px; margin:15px auto 15px; text-align:center;">

Outer <div> setup, no magic here. Set block display and width, which might match the image width. Top/bottom margins control spacing to previous and next paragraph.

<img style="width:400px; margin:0px auto 0px; padding:0px; cursor:pointer; cursor:hand;" src="img_1113rcswc.jpg" alt="" />

This is pretty normal image code. I have removed the display and margins that Blogger inserts since they are not needed. I am not providing a clickable, but that goes here as well when used.

<div style="margin-right:70px; margin-left:70px; font: italic normal 100% serif; line-height:1em; text-align:left;">Island Chaffee-Belmont Pier on left. Pretty annoying slipping an image right in the middle of the story, isn't it?</div></div>

This starts the inner <div> for the caption. This could be text-align:center for a short caption. The margins are set to allow the left-align to look about centered. The line-height is reduced from the post default, which is too much for a caption and the font is changed to make it stand out from normal text. The caption <div> is closed and the outer <div> is closed.

Now the Island Freeman with the caption alongside.

<div style="width:430px; margin:15px 10px 25px 0px;">

Outer <div> setup. The width could be set to the width of the main column (I'm under here.) Margins control spacing to surrounding text and images.

<img style="float:right; width:280px; margin:0px 0px 15px 0px; padding:0px; cursor:pointer; cursor:hand;" src="img_1085cswc.jpg" alt="" />

This is pretty normal code for a floating image. Again I'm not doing a clickable, but if I were the full Blogger image code would go here. I'm not sure both elements need to be floated, but if it works...

<div style="float:left; width:120px; margin:50px auto;font: italic normal 100% serif;line-height:1em;">Island Freeman — this is a left aligned, mulit-line caption on the same picture as above. The top margin gets adjusted to move it down.</div><div style="clear:both"></div>

This starts the inner <div> for the caption. This is floated left so it is alongside the image. I've set the top margin to move it down the image and changed the font. Then the inner <div> is closed, a clear:both is inserted, then the outer <div> is closed. I've tried the clear:both both outside the outer <div> and inside and it is effective both ways. It may not be needed in all cases.

As always, the appearance should be checked in more than one browser and adjusted to the one you want it to look the best in. I use Firefox, and even though most of my friends use IE, I have the better appearance in Firefox. I mean, can you really call an IE user a friend?

Tom