Something wrong with structure, not sure what!

I'm trying to make a liquid photograph border that will change sizes as a jQuery function is used for a slideshow. I was out of the web design scene for a while and am trying to get back into it.
Right now I'm only working on the left, top, and right sides of it. The bottom shouldn't be hard once I get this. I can't seem to get the borders to align into the center, and the only way I can even get them lined up with each other correctly is if I use float:left it seems. Doing this causes it to not align in the middle of course.
I am using frame_side for both left and right.
Here is the CSS: (The HTML is right after)

#frame {
	margin: 0 auto;
}
#frame_side {
	background-image:url(white_6x6.jpg);
	background-repeat:repeat-y;
	height: auto;
	min-height: 250px;
	max-height: 1000px;
	width: 6px;
	float: left;
}
#frame_top {
	background-image:url(white_6x6.jpg);
	background-repeat:repeat-x;
	width: auto;
	min-width: 250px;
	max-width: 1000px;
	height: 6px;
	float: left;

HTML:

}
HTML:

<div id="frame">
<div id="frame_side">
</div>
<div id="frame_top">
</div>
<div id="frame_side">
</div>
</div>

HTML:

What's going on?

 

Well for the frame_side element you need to be using classes, not ID's as its on the page more than once. I would go ahead and write code for each side however just to make it easier on the eye.

 

css:

html: