<style type="text/css">

.box581-outer {
	width:581px; background: url('images/box-581-mid.jpg') repeat-y;
}

.box581-inner {
	background: url('images/box-581-top.jpg') no-repeat; padding:41px 35px 16px 35px;
}

.box581-footer {
	background: url('images/box-581-bottom.jpg') no-repeat; height:54px;
}


.boxcol {
	float:left;
}


.box581-inner .boxcol {
	width:133px; padding:0 18px; 
}



</style>



<div class="box581-outer"><div class="box581-inner">
<div class="boxcol">left</div><div class="boxcol">center </div><div class="boxcol">right</div>
<div class="clear"></div></div><!--/.box581-inner--><div class="box581-footer"></div><!--/.box581-footer--></div><!--/.box581-outer-->

<script type="text/html">

.box581-outer {
	width:581px; background: url('images/box-581-mid.jpg') repeat-y;
}

.box581-inner {
	background: url('images/box-581-top.jpg') no-repeat; padding:41px 35px 16px 35px;
}

.box581-footer {
	background: url('images/box-581-bottom.jpg') no-repeat; height:54px;
}


.boxcol {
	float:left;
}


.box581-inner .boxcol {
	width:133px; padding:0 18px; 
}



</script>



<div class="box581-outer"><div class="box581-inner">
<div class="boxcol">left</div><div class="boxcol">center </div><div class="boxcol">right</div>
<div class="clear"></div></div><!--/.box581-inner--><div class="box581-footer"></div><!--/.box581-footer--></div><!--/.box581-outer-->

This is simple but saves time to copy-paste. This example has three columns (.boxcol) within the box. But the columns can be removed for single-column box.

simple graphic box code (3 col example)

css, image, html

HTML