Good Day!  Welcome to DanMacias.com.  Today you are learning how to create a 3-slice-box using HTML and CSS.   What is a 3-slice box?  A 3-slice box is a way of creating artistic adaptable containers for your website content.  You can make the box so it can either stretch vertically or horizontally.  If the box stretches vertcially, the width of the box will be fixed.  Alternatively, if the box stretches horizontally, the height will be fixed.  Lets Begin…

Design:

Create a container in photoshop.  There are two things to keep in mind when designing a 3-slice-box.  1) Remember that the width (or height if the container is horizontal) is fixed, so you need to be sure that that’s the size you desire.  2) Make sure there is a mid section to the box that will repeat.  When this sucker is coded, it will us an image that will repeat (like a pattern) to fill in the area that stretches.  This stretchable area needs to seamlessly connect to both the header and footer.  Below is the design I created for this tutorial.

Slice:

Open up your image editing program and start slicing up your image.  For this example I will be using Photoshop CS3.  First turn on the slice tool (Shift + K) and then slice up your image in three (like shown demonstrated below).  You need a slice for the complete top and footer.  Slice the middle into a strip or a section that will repeat.  Once you slice up the images, export them into the image folder of your site.

Code:

First we will create the html structure of the box.  This is how it should look like:<div class=”section-top”>
<div class=”section-bottom”>
<div class=”section-middle”>
Content Goes Here!!!
</div>
</div>
</div>

You’ll notice that these divs are nested within each other.  The reason this is done is because we want the middle to push the top and bottom divs out and use the middle with the repeatable background.  Here is the css:
.section-top{
width: 317px;
margin-bottom: 15px;
padding-top: 6px;
background: url(../img/section-top-small.jpg) top left no-repeat;
text-align: left;
}
.section-small .section-bottom {
padding-bottom: 13px;
background: url(../img/section-bottom-small.jpg) bottom left no-repeat;
}
.section-small .section-middle {
padding: 0 6px;
background: url(../img/section-middle-small.jpg) left top repeat-y;
overflow: auto;
}

Notice how only .section-top has a width.  This is because nested divs will adapt to the parent width.  The padding-top in .section-top and padding-bottom in .section-bottom add the necessary padding that is needed to show the header and footer image.