Making <div> containers with image borders - html

Question

I would like to write up some css/html for container boxes that I can put on my site in various places (ie- to draw out modules like a calendar on the site's sidebar).
I have 5 images: left, right, top, bottom and background for the div.
The top image is 37 px tall, the bottom image is 22 px tall.
I would ideally like to specify a div height/width and then have it draw the div with the images on the top/bottom/right/left sides, autosized to the div's proportions and not overlapping with each other. I would assume that youd want to use absolute positioning for the non-overlapping bit, but I'm completely unsure of how to make the images resize and stick to each side.
Here's the (very bare) code that I have right now:
#top {background: url(container_top.png) no-repeat;}
#container {background: url(container_left.png) no-repeat;}
#right {background: url(container_right.png) no-repeat;}
#bottom {background: url(container_bottom.png) no-repeat;}
<div id="top">
<div id="container">
Content post
</div>
<div id="right"></div>
<div id="bottom"></div>
</div>
The only other caveat is that I only want the top/bottom images to scale horizontally (not to resize on the y axis as well), and the left/right images to scale vertically (not to resize on the x axis as well).
For reference, my images are named:
"container_.png"

Answer 1

there are a few options. First one is to create four corner divs and four side divs, using the corner images at each corner and a repeatable image for the sides. You can also use a kind of "sliding-door" technique. And if you're a brave guy, use css3 border-images (checkout http://w3schools.com/cssref/css3_pr_border-image.asp)
option one:
<div class="box">
<div class="top">
<div class="top-left"></div>
<div class="top-right"></div>
</div>
<div class="content">
<div class="left"></div>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
</div>
.top { background: url('repeatable.png') repeat-x; }
.top-left { background: url('top-left.png') no-repeat; }
.content .left { background: url('repeatable') repeat-y; }
....
for sliding door technique, checkout http://www.google.com/?q=google+css+sliding+doors