Stretch div as much as possible within a table cell - html

Question

I am currently working on a personal website which will contain pictures. I wanted to create a frame for those pictrues, so I sliced a photo of the frame into pieces and made each piece a div, since I want a certain part of the frame pic to stretch but not the edges, e.g. Here's my table:
<table>
<tr>
<td height="93px" width="93px"><div id="photo_corner_topleft"></div></td>
<td height="93px"><div id="photo_beggining_top"></div><div id="photo_side_top"></div><div id="photo_ending_top"></div></td>
<td height="93px" width="93px"><div id="photo_corner_topright"></div></td>
</tr>
<tr>
<td width="93px"><div id="photo_beggining_left"></div><div id="photo_side_left"></div><div id="photo_ending_left"></div></td>
<td>
<div id="photo_content" align="center">
<!-- HERE goes the photo. -->
</div>
</td>
<td width="93px"><div id="photo_beggining_right"></div><div id="photo_side_right"></div> <div id="photo_ending_right"></div></td>
</tr>
<tr>
<td height="93px" width="93px"><div id="photo_corner_bottomleft"></div></td>
<td><div id="photo_beggining_bottom"></div><div id="photo_side_bottom"></div><div id="photo_ending_bottom"></div></td>
<td height="93px" width="93px"><div id="photo_corner_bottomright"></div></td>
</tr>
</table>
So, I want the divs "photo_side_whatever" to be as long as possible without pushing the "ending" and "beggining" divs out. I have checked other questions but I still haven't managed to make it. Here is my div:
#photo_side_left {
min-height: 224px;
width: 93px;
height: auto;
background-image: url(img/dynamic_frame/frame_09.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

Answer 1

Insert this at the beginning of your div. Is this live anywhere so I can better understand your question?
position:absolute;

Answer 2

There's no way to do it that will work in all browsers (the CSS3 background-size property should be able to do it, but AFAIK it's not fully supported yet). The easiest thing to do, I'd have thought, would be to set the background image within the <td>s to be a small slice (by which I mean about 1-2px on its shortest side) of the frame, set to repeat.
Something like:
#photo_side_left {
background-image: url('img/dynamic_frame/frameslice.png');
background-repeat:repeat-y;
min-height: 224px;
width: 93px;
height: auto;
background-position: center;
background-repeat: no-repeat;
}
EDIT: Apply that to the <td>, rather than bothering with <div>s. The td will always be the right size ^^