Div Box redondeados

[nachourpi]

Hola a todos los foreros expertos XHTML!, buneo les cuento la verdad lo mio no es el diseño pero trato de arreglarmelas lo mejor q puedo, estoy trabajando en un sitio en el q hay "cajas" echas con etiquetas <div> y con estilos definidos en la hoja de estilos. Estas cajas tienen los bordes redondeados que lo hice con 4 imagenes una pra cada esquina y ademas necesitaba q sean imagenes por q tienen una sombra por eso las imagenes son png. Bueno le muestro la estructura que use:

Código HTML:

<div id="box">
    <div class="header">
      <div class="left"> </div>
      <div class="middle">
      	<h2> Titulo de Noticia</h2>
      </div>
      <div class="right"> </div>
    </div>
    <div class="content">
      <span class="contenido"> 
           Contenido
      </span>
    </div>
    <div class="footer">
      <div class="left"> </div>
      <div class="middle"> </div>
      <div class="right"> </div>
    </div>
  </div> 

Y su correspondientes estilos:

Código PHP:

  #box .header {
    height: 87px;
    width: 100%;
    /*background-image: url(img/boxHeaderMiddle.png);
    background-image: url(../img/boxHeaderMiddle.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderMiddle.png',sizingMethod='scale');*/
    background-repeat: repeat-x;
    padding: 0;
    margin: 0;
    border: 0;
 
}
#box .header .left {
    position: relative;
    float: left;
    background-image: url(img/boxHeaderLeft.png);
    /*background-image: url(../img/boxHeaderLeft.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderLeft.png',sizingMethod='scale');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 110px;
    height: 87px;
}
#box .header .middle {
    position: relative;
    float: left;
    height: 87px;
    background-image: url(img/boxHeaderMiddle.png);
    /*background-image: url(../img/boxHeaderMiddle.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderMiddle.png',sizingMethod='scale');
    background-repeat: repeat-x;
}
 
#box .header .right {
    position: relative;
    float: right;
    background-image: url(img/boxHeaderRight.png);
    /*background-image: url(../img/boxHeaderRight.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxHeaderRight.png',sizingMethod='scale');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 110px;
    height: 87px;
}
#box h1 {
    font-family: comic Sans MS;
    font-size: 24px;
    color: #009900;
    font-weight: bold;
    padding-top: 40px;
}
#box h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #009900;
    font-weight: bolder;
    text-decoration: underline;
    padding-top: 40px;
}
 
#box .content {
    /*background-color: #FFE300;*/
    background-image: url(img/boxContent.png);
    /*background-image: url(../img/boxContent.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxContent.png',sizingMethod='scale');
    background-repeat: repeat-y;
    width: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #009900;
    font-weight: bold;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #006600;
    padding-left: 50px;
}
 
#box .footer .left {
    position: relative;
    float: left;
    background-image: url(img/boxFooterLeft.png);
    /*background-image: url(../img/boxFooterLeft.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxFooterLeft.png',sizingMethod='scale');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 110px;
    height: 101px;
}
#box .footer .middle {
    position: relative;
    float: left;
    background-image: url(img/boxFooterMiddle.png);
    /*background-image: url(../img/boxFooterMiddle.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxFooterMiddle.png',sizingMethod='scale');
    background-repeat: repeat-x;
    background-position: 0px 0px;
    height: 101px;
    width: auto;
}
#box .footer .right {
    position: relative;
    float: right;
    background-image: url(img/boxFooterRight.png);
    /*background-image: url(../img/boxFooterRight.png);*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/boxFooterRight.png',sizingMethod='scale');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 110px;
    height: 101px;
} 
   

buneo si quieren pueden ver estas BOX amarillas en accion en el sitio de pruebas:
http://www.en25.bollmas.com.ar/ , el problema es q las <div class="middle"> y <div class="content"> no llenan todo el espacio entre <div class="left"> y <div class="right"> por ello, si ven el link q les puse vana ver como los box tienen zonas con fondo blanco. Lo primero q se me ocurria es ponerle un atributo "width:100%;" en los estilos pero esto me desordena toda la caja. Ademas como yo uso estas cajas para informaciones diferentes necesito q sea de tamaño ajustable tanto en ancho como en alto, por eso no puedodefinir un tamaño estatico para el ancho en <div class="middle">,por si no me explico bien, lo que seria ideal para mi es que en la hoja de estilos pueda poner algo como esto:
"#box .header .middle{
width: 100% - .header.left - .header.right;
}"
Lamentablemente esto no se puede. Ya busque y consegui miles de tutoriales de cajas redondeadas, etc. pero no consigo arreglar esto. Bueno muchas gracias!

NAcho

[pateketrueke]

busca jQuery ((hay algun plugin para ello))

[nachourpi]

Gracias ahi encontre algo: http://jrc.meerbox.nl/?page_id=4 esta buneo pero trato de evitar usar javascript en cosas q se que se pueden solucionar sin ello. Creo q puede agilizar la navegacion mas un diseño como este que esta cargadisimo de imagenes buneo gracias de todos modos!;)

NAcho