aumentar div del centro de acuerdo a la cantidad de noticias....

[X_fran]

Hola peoples, tengo un sistema de noticias en el que mi plantilla esta formada por un div contenedor, dentro de este header, columna_der, columna_centro, columna_izq y fuera del contenedor el footer. En mi pagina principal muestro(dentro del div del centro) muestro 7 resumenes de noticias por paginas para que el usuario marque cualquiera y acceda al contenido completo de la noticia. Mi problema es que el resumen de cada noticia puede variar y llega un momento en que el div del centro sobrepasa el tamanho del div contenedor, es decir, no se como aumentar el div contenedor de acuerdo al tamanho del div del centro.

disculpen la explicacion, un poco engorrosa, pero es como mejor lo puedo ilustrar.

[jomaruro]

Hola:

Sin ver tu código es difícil saber que pasa pero...

¿el contenedor tiene tamaño fijo? No debería ser así, si le das un tamaño determinado no crecerá nunca.

Saludos.

[X_fran]

jomaruro, aqui esta mi codigo css, no creo este lo mas optimo posible

.

Código CSS:

wrapper{
    background:white; /*#2E90BD;*/
    border:#2E90BD 1px solid;
    width:970px;
    height:90%;
    min-height:1000px;
    margin-top:2em;
    margin-left:2em;
    border:1px solid #2E90BD;
    font-size:10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    /*
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    */
}
 
.banner{
    width:100%;
    height:170px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;        
    
}
 
.left_panel{
    position:absolute;
    left:33px;
    top:200px;
    width:200px;
    height:100%;
}
 
.center_panel{
    position:absolute;
    left:238px;
    top:200px;
    width:555px;
    height:100%;
}
 
.right_panel{
    position:absolute;
    top:200px;
    left:796px;
    width:200px;
    height:100%;
}
 
.footer{
    background-color:#2E90BD;
    color:white;
    border:#2E90BD 1px solid;
    font-weight:900;
    text-transform:uppercase;
    text-align:center;
    font-size:10px; 
    font-family:Lucida, Verdana, Sans-serif;
    letter-spacing:1.5px;
    margin-left:2em;
    padding-top:7px;
    width:972px;
    height:20px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
}
 

y este es el html:

Código HTML:

<div class="wrapper">
    <div class="banner"></div>
    <div class="left_panel"></div>
    <div class="center_panel"></div>
    <div class="right_panel"></div>
</div>
<div class="footer"></div>
 

anteriormente habia incluido el footer dentro el div wrapper y asi solo tenia que darle al wrapper margin:2em auto; y con eso ya lo centraba, pero saque fuera el footer buscandole una solucion al alto variable del div del centro pero no la encontre.

realmente no se como hacer lo del alto variable para el wrapper !!!!

[jomaruro]

Hola:

Modifica en tu css lo que te indico en rojo:

Código:

.wrapper{
    background:white; /*#2E90BD;*/
    border:#2E90BD 1px solid;
    width:970px;
    /*height:90%;*/
    min-height:1000px;
    margin-top:2em;
    margin-left:2em;
    border:1px solid #2E90BD;
    font-size:10px;
    overflow:auto;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    /*
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    */
}
 
.banner{
    width:100%;
    height:170px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
}

.left_panel{
    /*position:absolute;*/
    float:left;
    /*left:33px;
    top:200px;*/
    width:200px;
    /*height:100%;*/
}
 
.center_panel{
    /*position:absolute;*/
    float:left;
    /*left:238px;
    top:200px;*/
    width:555px;
    height:auto;
}
 
.right_panel{
    /*position:absolute;*/
	float:left;
    /*top:200px;
    left:796px;*/
    width:200px;
    /*height:100%;*/
}
 
.footer{
    background-color:#2E90BD;
    color:white;
    border:#2E90BD 1px solid;
    font-weight:900;
    text-transform:uppercase;
    text-align:center;
    font-size:10px; 
    font-family:Lucida, Verdana, Sans-serif;
    letter-spacing:1.5px;
    margin-left:2em;
    padding-top:7px;
    width:972px;
    height:20px;
    overflow:auto;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
}

Solo debes tener en cuenta que si los divs left_pannel, center_pannel y right_pannel no tienen contenido no se verán.

Saludos.

[X_fran]

jomaruro, muchas gracias,
es verdad que el que no sabe es como el que no ve !!!

por cierto !?!?, si dentro del div del centro incluyo otro div que seria realmente el contenido de una vista en especifico, tambien aumentaria todo con respecto al tamaño de esa vista especifica ??

[jomaruro]

Hola:

No sé hasta que punto es necesario incluir un div dentro del div del centro, tampoco es bueno abusar de divitis, de todas formas el contenedor siempre crecerá según el contenido o se puede forzar a que lo haga.

Saludos.

[X_fran]

bueno, jomaruro, lo de incluir un div dentro del div del centro es debido a que la app es basicamente un conjunto de portlets ubicados en los div de los laterales y el contenido del centro siempre sera un porlet.

lo bueno es que con el css con los arreglos que me indicaste me facilita agregar todos los portlets que desee a ambos lados, cosa que no tenia idea de como hacer para que no me alterara el maquetado.

Saludos !!!!