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:

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

What's going on?

Did you try to use width: xx% percentage?

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

Try something like this instead?

Hope that help...