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>
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;
}
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
Mode Lineal
