I am in the middle of coding a photography portfolio for myself.

I have mocked up 1 page so far.
Rather than making 200 pages or so, It would be best if I could write the code once then just change images
the problem is that my images are of different sizes, I would stick to a height of 460px though, but I need the width to expand to accomodate the image

http://www.freewebs.com/uuilliam/header.html

that is a link to the mock (~it is written using php too but for the host I had to put it into html.)

rules: there must be 10px of white space around the image and 20px of the grey space around the white at minimum.

Put the image in an floated block container with a 10px margin on the image and a grey 20px border on the container

#image_holder {
	overflow: auto;
	border: 20px solid grey;
	float:left;
}
#image_holder img {
	margin: 10px;
}

<div id="image_holder"><img src="image_path" alt="text" /></div>

my code atm is

<div class="content_background">
<div class="content">
<div class="display">
<img src="images/test1.jpg" height="450" width="389"/>
</div>
</div>
</div>

and css:

/*content*/
.content_background {
margin: 10px auto;
background: #2c2c2c;
border: thin solid #363636;
min-height: 500px;
width: 880px;
}
.content {
background: #ffffff;
height: 470px;
width: 409px;
border: solid thin #000000;
margin:20px auto;
}
.display {
margin: 10px 0px 0px 10px;
clear: both;
}

I done what you said but it no longer centers

http://www.freewebs.com/uuilliam/header.html

/*content*/
.content_background {
    margin: 10px auto;
    overflow: auto;
    background: #2c2c2c;
    border: thin solid #363636;
    min-height: 500px;
    width: 880px;
}
.content {
    background: #ffffff;
    overflow: auto;
    border: solid thin #000000;
    margin:20px;
    float: left;
}
.content img {
    margin: 10px;
}

You need to keep margin on auto and insert padding instead, and remove float left. Div class="center" actually you don't need it, and in content_background you can insert text-align: center; for IE6 (if you care about it).

.content {
background: #ffffff;
overflow: hidden;
border: solid thin #000000;
margin:20px auto;
padding: 10px;
}

You cannot float an element AND centre it in it's parent at the same time.

I figured it out, the code was:

in .center

{
position:relative;
float:left;
left:50%
}

then in .content

{
Position: relative;
float: left;
left: -50%;
}

that centers it for me

so got the center done, got my thumb nails...
just trying to figure out (without having to make a new page for each image) how to make it so when you click the thumbnail, the image comes up.

Also, if I could figure a way to make it so thumbnails are auto generated with the longest side being 100px, it would help.

and to do with calibrating for all browsers, if it doesn't work in internet explorer, so be it.
my main target is firefox users and chrome.