DIV graphic borders

This is a very simple and clean method for making a graphic border in an HTML block element. There is no clutter of table cells and as few div blocks as necessary (just 3). The border can be changed, removed and the box resized by only changing the style sheet. In implementing this method there are 2 requirements to be met:

• The width is of fixed size (it doesn't widen with the content)
• The height is variable (it will grow with more content)

• A header block, body block and a footer block are stacked
• Each box gets a background image.
• The 3 background images involved must also be 300px wide.
• The header and footer should have fixed heights matching their background image sizes
• The footer and header block widths must be same as their background images (300px).
• Set the body left/right padding large enough such that the text does not overlap the color region of the left right borders in the background image (10px)
• Set the body width to the width of the header minus the width of the left+right padding (=280px)

So after all those rules you get a bordered box with an adjustable height and fixed width.
Note that the background image of the body must merge cleanly with the bottom and top of the header and footer respectively. So really, you should aim for a body background image of a height of only 1px.

This method also permits heavy use of imagination to spice things up but again only requiring changes to the style sheet ... a speech balloon arrow can be added to the footer ... gradient added to the body ... thick CSS borders added for emphasis ... puffy clouds surrounding the whole block. Varying background-repeat (and other attributes) for the body block can give you very powerful affects when well planned.

HTML Code:

So after all those rules you get a bordered box with an adjustable height and fixed width.


Note that the background image of the body must merge cleanly with the bottom and top of the header and footer respectively. So really, you should aim for a body background image of a height of only 1px.

CSS Code:

div.cheader {
width: 300px;
background-image: url(images/box-top-300.png);
height: 17px;
}

div.cbody {
width: 280px;
padding-left: 10px;
padding-right: 10px;
background-image: url(images/box-bkgrd-300.png);
}

div.cfooter {
width: 300px;
background-image: url(images/box-bottom-300.png);
height: 20px;
}