easy layout for graphic border in css? how to stop misaligned border graphics?

Question

CSS is not one of my strong points! I'm trying to find a tutorial or something that will give me a premade div and css arrangement if I have a repeating top, left,bottom, right and corners graphic. I feel like I'm getting just close enough but then something breaks horribly. I don't want to use the new css3 implementation.

edit: SOrry for being unclear. I just want to use an image as a border. I have a graphic for the topleft,topright,bottomleft,bottom right, and repeating left and right and top and bottom graphics. I thought that HTML tables were deprecated so I stayed away from them, but I still have problems aligning the border correctly. I'll either have little gaps inbetween somehow, and/or I can't force the border to repeat only every X pixels so the corner graphics line up with the top/bottom and left/right graphics.

Edit: I got pretty close, but there are still ugly problems with the repeating graphic not starting or ending in the right place, and getting the background of the inside to be a solid color behind the png transparency. I'll post what I have.

<div id="box">

        <div id="tl"><div id="tr"><div id="top"></div></div></div>
        <div id="left"><div id="right"><div id="content">
            test text
        </div>
        </div></div>
        <div id="bl"><div id="br"><div id="bottom"></div></div></div>
</div>

my css:

#top {background: url(top.png) repeat-x; width:79%}
#bottom {background: url(bottom.png) repeat-x;height:58px;width:auto;margin-left:auto;margin-right:auto;width:79%;}
#left {background: url(left.png)  repeat-y}
#right {background: url(right.png) repeat-y 100% 100%}
#bl {background: url(corner4.png) 0 100% no-repeat;height:55px;margin-left:-6px;}
#br {background: url(corner3.png) 100% 100% no-repeat;height:55px;}
#tl {background: url(corner1.png) 0 0 no-repeat;height:55px;}
#tr {background: url(corner2.png) 100% 0 no-repeat;height:55px; } 

Answer 1

Ok... got it. Well, does your container have fixed width? If yes....

• Create one image for the top which extends across the entire container. Put that image as a normal image inside your container in the HTML, as the first element.

• Create another image for the bottom which extends across the entire container. Put this image as a normal image inside your container in the HTML, as the last element.

• Create a horizontal background image (1 pixel high) which extends across the entire container and use CSS repeat-y. This gives you the sides for any height container.

... What you'll end up with is something like:

<div with background image>
   <top image>
       <your content>
   <bottom image>
</div>