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