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"> </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:
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 #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;
}
Como podeis observar las esquinas estan bien, pero las partes centrales nop
a ver como puedo hacerlo, gracias!!!!!
