Div autoajustable - repeat x y repeat y

[Laufwerk]

Hola amigos!!
Tengo un div padre que en su interior obtengo una tabla de 3x3 también echa con divs
el div padre tiene una anchura de 785px
y quiero que en el 3x3 se me auto adapte.

Les dejo el codigo HTML

Código:

        <div id="right">
            <div id="top_left"></div>   
            <div id="top_center"></div>   
            <div id="top_right"></div>   

            <div id="div_clear"></div>

            <div id="middle_left"></div>   
            <div id="middle_center">&nbsp;</div>   
            <div id="middle_right"></div>   

            <div id="div_clear"></div>

            <div id="bottom_left"></div>   
            <div id="bottom_center"></div>   
            <div id="bottom_right"></div>   
        </div>

Codigo CSS

Código:

	#right{
		position:relative;
		float:left;
		border: red thin solid;
		width:785px;
		height:auto;
		margin-left:10px;
	}
		#right #top_left{
			position:relative;
			float:left;
			background-image:url(../img/content/top_left.gif);
			width:7px;
			height:7px;
		}
		#right #top_center{
			position:relative;
			float:left;
			background-image:url(../img/content/top_center.gif);
			background-repeat:repeat-x;
		}
		#right #top_right{
			position:relative;
			float:right;
			background-image:url(../img/content/top_right.gif);
			width:7px;
			height:7px;
		}
		

		#right #middle_left{
			position:relative;
			float:left;
			background-image:url(../img/content/middle_left.gif);
			background-repeat:repeat-y;
		}
		#right #middle_center{
		}
		#right #middle_right{
			position:relative;
			float:right;
			background-image:url(../img/content/middle_right.gif);
			background-repeat:repeat-y;
		}


		#right #bottom_left{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_left.gif);
			width:7px;
			height:7px;
		}
		#right #bottom_center{
			position:relative;
			float:left;
			background-image:url(../img/content/bottom_center.gif);
			background-repeat:repeat-x;
		}
		#right #bottom_right{
			position:relative;
			float:right;
			background-image:url(../img/content/bottom_right.gif);
			width:7px;
			height:7px;
		}

no consigo que el top_center y el bottom_center se me alarguen o repitan la imagen en horizontal y tampoco que le middle_left y el middle_right se me repitan en vertical




Como podeis observar las esquinas estan bien, pero las partes centrales nop



a ver como puedo hacerlo, gracias!!!!!