View Full Version : image captions

02-14-2005, 12:34 PM
I have a article and want to add images like this

<img src=http://www.test.com/images/article1d.jpg hspace="5" vspace="5" border="0" align="left" >

without having to use tables.
This works nicely but what if I want a caption under the images.
Is there anyway to do it without using a table?

02-14-2005, 03:16 PM
Without seeing the actual page layout and markup ("code"), it's hard if not impossible to give definitive answers.
However, using floats will probably give the best results; enveloping the image itself and its caption in a surrounding element, which is then floated to the proper side shouldn't be too hard to do.

02-14-2005, 03:40 PM
all I wnat to do is have a paragraph of text around the picture.

My problem is right now I cannot put a caption under the picture and still keep the space aroudn teh pictures.

How would I do it with floats?

02-14-2005, 04:09 PM
all I wnat to do is have a paragraph of text around the picture
You mean, you want the text to flow around the picture? Then float is your friend.
Encase the picture and caption in a surrounding element, sort of like:

<div class="picboxleft">
<img src="thesource.jpg" alt="alternativedescription" />
<p>The caption text goes here.</p>

<p>This is the normal text flowing around the picture and caption</p>

If you then float the picbocleft div either left or right (in which case, picboxright may be a better class name... :o ), the following text will flow around this box. Style rules, using the class handle picboxleft, can be applied to taste. Just a quick example:

.picboxleft {
float: left;
background-color: #fff;
border: 1px solid #ccc;
padding: 0.5em;

.picboxleft img {
width: 200px;
height: 150px;
display: block;

.picboxleft p {
font-size: 0.8em;
text-align: center;

for a left floated box with half an em padding, a white background and a light grey border, an image with the presumed dimensions 200 x 150 pixels (adjust to need), and a slighty smaller, center-aligned caption text.

02-14-2005, 06:15 PM
Thanks for your help.

This is exactly what I needed.

Is there any specific book you would recommend on css to learn all these css techniques?

02-15-2005, 03:08 AM

I stumbled across this page just now and remebered seeing your question this morning.

just a little more options depending on what you want to do ;)

02-15-2005, 03:20 AM
I was just working on a similar idea for my portfolio pages....Check out:


Also try one of the inner pages. I used a different float method for that.

I used definition lists...which I was under the impression are more semantic...and pretty easy to work with.

02-15-2005, 09:40 AM
are more semantic
You're most likely right; I just did that of the top of my head to give an example.

02-15-2005, 01:53 PM
that depends on whether you want a single image embedded into the text, or a series of images, such as a gallery.

In the case of a gallery the dl is more semantic, but for a one off the div and p are a better option.