how to line a box with thin border containing background image

[Skeeve]

Hi there,

I'm trying to create a containing box (relative position), and within
it, I'm trying to line that box with four (top, right, left, bottom)
thin boxes that contain a repeated background image, thus creating a
kind of fancy border. What would be the best practice to do that? I
thought that if the containor box was relative and the contained boxes
were absolute, that would work because the absolute boxes would be
measured againsted the containing box. But, it seems that each
subsequent box is measured off of the preceeding box, not the
containing one.

Here's what I get:

(the containing box, called calendar, is invisible)
||============= =========
||
||
||
|| <-----line should be here to make a box
||
||
||
||
||
||============= =========||
||
||
|| <------ this should be up above to make a box.
||
||
||
||
||
||

Here's the code:
HTML:
<div id="calendar">
<div id="top-border"/>
<div id="left-border"/>
<div id="bottom-border"/>
<div id="right-border"/>
</div>

CSS:
#calendar {
width: 1000px;
height: 887px;
margin-left: auto;
margin-right: auto;
margin: 0em;
padding: 0em;
position: relative;
border: 1px solid;
}

#top-border {
width: 100%;
background-image: url(images/bg_top.gif);
background-repeat: repeat-x;
height: 7px;
position: absolute;
top: 0em;
left: 0em;
}

#left-border {
background-image: url(images/bg_left.gif);
height: 887px;
width: 8px;
background-repeat: repeat-y;
position: absolute;
left: 0px;
top: 0px;
}

#right-border {
background-image: url(images/bg_right.gif);
height: 887px;
width: 8px;
background-repeat: repeat-y;
position: absolute;
right: 0px;
top: 0px;
}

#bottom-border {
width: 1000px;
background-image: url(images/bg_bottom.gif);
background-repeat: repeat-x;
height: 7px;
position: absolute;
bottom: 0px;
left: 0px;
}

Thanks in advance for your help.
Skeeve