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