I am trying to build this re-sizable box for an iPod Touch application. http://mo-de.net/d/bg.jpg

#content_container_top {width:50%; height:13px; padding: 0px; position: relative;}
#content_container_top_left {width:13px; height:13px; padding: 0px; top: 0px; left: 0px; position: absolute; background-image: url(../images/content_container_a/tl.png); background-repeat: no-repeat;}
#content_container_top_repeat {width:100%; height:13px; padding: 0px; top: 0px; left: 13px; position: absolute; background-image: url(../images/content_container_a/ttrepeat.png); background-repeat: repeat-x;}

<div id="content_container_top"><!--Start top with three columns -->
<!-- Top columns 1 -->
<div id="content_container_top_left"> </div>
<!-- Top columns 2 -->
<div id="content_container_top_repeat"> </div>
<!-- Top columns 3 -->
<div id="content_container_top_right"> </div>
</div><!--End top with three columns →

This is a rough version of what I was thinking. In the old days I could do this easily with tables but I am trying to do this with divs.

My question is how can I create three columns the center has a tiled background that resizes. How do I make the center duplicate its self and not over ride the right side? I know how to make fixed size three column layouts but not sure how to make dynamic re-sizable three columns.

My final solution.

/// The CSS ////

#content_container_top {width:50%; height:13px; padding: 0px; position: relative; }
#content_container_top_left {width:13px; height:13px; padding: 0px; top: 0px; left: 0px; position: absolute; background-image: url(../../shared/images/content_container_a/tl.png); background-repeat: no-repeat; }
#content_container_top_repeat {height:13px; padding: 0px; top: 0px; margin-left: 13px; margin-right: 13px; background-image: url(../../shared/images/content_container_a/trepeat.png); background-repeat: repeat-x; background-color:#ab4444; }

#content_container_top_right {width:13px; height:13px; padding: 0px; top: 0px; right:10px; position: absolute; background-image: url(../../shared/images/content_container_a/tr.png); background-repeat: no-repeat; background-color:#a4caa8;}

/// The HTML ////

<div id="content_container_top"><!--Start top with three columns -->
<!-- Top columns 1 -->
<div id="content_container_top_left"> </div>
<!-- Top columns 2 -->
<div id="content_container_top_repeat"> </div>
<!-- Top columns 3 -->
<div id="content_container_top_right"> </div>
</div><!--End top with three columns -->