CSS Graphic Picture Frame

Basic Picture Frame:

<style>

#PictureFrame .top_left {
	height:10px;
	width:10px;
	white-space:nowrap;
	background:url(images/top_left.gif);
	}

#PictureFrame .top_right {
	height:10px;
	width:10px;
	white-space:nowrap;
	background:url(images/top_right.gif);
	}

#PictureFrame .bottom_left {
	height:10px;
	width:10px;
	white-space:nowrap;
	background:url(images/bottom_left.gif);
	}

#PictureFrame .bottom_right {
	height:10px;
	width:10px;
	white-space:nowrap;
	background:url(images/bottom_right.gif);
	}

#PictureFrame .top { 
	height:10px;
	background:url(images/top.gif);
	}

#PictureFrame .bottom { 
	height:10px;
	background:url(images/bottom.gif);
	}

#PictureFrame .left { 
	height:10px;
	background:url(images/left.gif);
	}

#PictureFrame .right { 
	height:10px;
	background:url(images/right.gif);
	}

#PictureFrame .picture { 
	padding:10px;
	text-align:center;
	vertical-align:middle;
	}

</style>

<table cellpadding="0" cellspacing="0" border="0" width="100%" id="PictureFrame">
	<tr>
		<td class="top_left"></td>
		<td class="top"></td>
		<td class="top_right"></td>
	</tr>
	<tr>
		<td class="left"></td>
		<td class="picture">
		Example 1<br />Picture contents go here
		</td>
		<td class="right"></td>
	</tr>
	<tr>
		<td class="bottom_left"></td>
		<td class="bottom"></td>
		<td class="bottom_right"></td>
	</tr>
</table>

It's a bit clunky, but if you put the top half of the code in a server-side include and the bottom part in a server-side include, you only have to write the messy part once.

Using Server Side Includes:

To see the 2nd example pieces, save or do a view source on includes/pictureframe_head.shtml and includes/pictureframe_foot.shtml.

If you do a "view source" the served content of this page, it will look identical to the above. But from a development point of view, you're reusing code and stuff that's been cached by the browser, and so it's generally more efficient.

It looks like:

<!--#include virtual="includes/pictureframe_head.shtml" -->
		Example 2<br />Picture contents go here
<!--#include virtual="includes/pictureframe_foot.shtml" -->

To solve the problem of changing widths, we can put these frames within a larger expandable table, and let the size of those cells determine the size of the frames.

In an expandable table container:

<table width="100%"  border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td width="25%">
		<!--#include virtual="includes/pictureframe_head.shtml" -->
		Picture
		<!--#include virtual="includes/pictureframe_foot.shtml" -->
	</td>
    <td width="25%">
		<!--#include virtual="includes/pictureframe_head.shtml" -->
		Picture
		<!--#include virtual="includes/pictureframe_foot.shtml" -->
	</td>
    <td width="25%">
		<!--#include virtual="includes/pictureframe_head.shtml" -->
		Picture
		<!--#include virtual="includes/pictureframe_foot.shtml" -->
	</td>
    <td width="25%">
		<!--#include virtual="includes/pictureframe_head.shtml" -->
		Picture
		<!--#include virtual="includes/pictureframe_foot.shtml" -->
	</td>
  </tr>
</table>

Fixed-width frames that wrap themselves:

<style>
	#Container table { 
		width:200px; 
		margin:10px; 
		float:left
	}
</style>

<div id="Container">
	<!--#include virtual="includes/pictureframe_head.shtml" -->
	Picture 1
	<!--#include virtual="includes/pictureframe_foot.shtml" -->
</div>

NOTE: Just remember to clear the floats in the next line after the frames by either applying style="clear:both" or <br clear="all">

Checked on Firefox, Internet Explorer and Safari