I have images which I wan't to wrap in a 2px border and I also wan't text below that image.

So I made the background black and adding a 2px padding which created the effect I wanted, I could then add text below it.

But the DIV is the full width of the page and not the width of the image. I can't set a width because I want to use this on differen't sized images.

Is there a way to make it auto size to the width of the image?

Will

<div class=text><div class=image></div><br />Text here</div>

not work?

The width problem still comes into play though does it not?

display: table;

Seems to have sorted it for me.

//internet explorer makes me cry

Do you want the images to be displayed next to each other horizontally, vertically? You could always use a divider and break it up into two paragraphs.

Float 'em!

div's are block level elements just like paragraphs so you can't place them next to each other using the normal document flow (i.e. without floating/using positioning etc)

IE makes all of us cry... :-"

What Stephen said is right, you need to position or float the elements.